Skip to content

Commit 90e25d8

Browse files
github-actions[bot]yordan-mitev
github-actions[bot]
and
yordan-mitev
authored
Merge docs-update-menu-overview-651 into production (#736)
* docs: update menu overview.md * docs: address feedback from review Co-authored-by: Yordan Mitev <ymitev@progress.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent 5103ced commit 90e25d8

File tree

1 file changed

+155
-132
lines changed

1 file changed

+155
-132
lines changed

‎components/menu/overview.md‎

Lines changed: 155 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,155 @@
1-
---
2-
title: Overview
3-
page_title: Menu Overview
4-
description: Overview of the Menu for Blazor.
5-
slug: components/menu/overview
6-
tags: telerik,blazor,menu,overview
7-
published: True
8-
position: 0
9-
---
10-
11-
# Menu Overview
12-
13-
The <a href="https://www.telerik.com/blazor-ui/menu" target="_blank">Blazor Menu component</a> displays data (flat or hierarchical) in a traditional menu-like structure. In addition to built-in navigation capabilities, you can browse through the items and their children, define [templates]({%slug components/menu/templates%}) for the individual nodes, render text and icons/images, and respond to [events]({%slug components/menu/events%}).
14-
15-
#### To use a Telerik Menu for Blazor:
16-
17-
1. add the `TelerikMenu` tag
18-
1. provide a collection of models to its `Data` property (read more in the [Data Binding article]({%slug components/menu/data-binding/overview%}))
19-
1. match the fields in the models with the binding schema for the nodes
20-
21-
>caption Basic menu with hierarchical data binding and built-in navigation
22-
23-
````CSHTML
24-
Use a menu to navigate between views
25-
26-
<TelerikMenu Data="@MenuItems"
27-
UrlField="@nameof(MenuItem.Page)"
28-
ItemsField="@nameof(MenuItem.SubSectionList)"
29-
TextField="@nameof(MenuItem.Section)">
30-
</TelerikMenu>
31-
32-
@code {
33-
public List<MenuItem> MenuItems { get; set; }
34-
35-
public class MenuItem
36-
{
37-
public string Section { get; set; }
38-
public string Page { get; set; }
39-
public List<MenuItem> SubSectionList { get; set; }
40-
}
41-
42-
protected override void OnInitialized()
43-
{
44-
MenuItems = new List<MenuItem>()
45-
{
46-
new MenuItem()
47-
{
48-
Section = "Company", // items that don't have a URL will not render links
49-
SubSectionList = new List<MenuItem>()
50-
{
51-
new MenuItem()
52-
{
53-
Section = "Overview",
54-
Page = "company/overview"
55-
},
56-
new MenuItem()
57-
{
58-
Section = "Events",
59-
Page = "company/events"
60-
},
61-
new MenuItem()
62-
{
63-
Section = "Careers",
64-
Page = "company/careers"
65-
}
66-
}
67-
},
68-
new MenuItem()
69-
{
70-
Section = "Services",
71-
SubSectionList = new List<MenuItem>()
72-
{
73-
new MenuItem()
74-
{
75-
Section = "Consulting",
76-
Page = "consultingservices"
77-
},
78-
new MenuItem()
79-
{
80-
Section = "Education",
81-
Page = "education"
82-
}
83-
}
84-
}
85-
};
86-
87-
base.OnInitialized();
88-
}
89-
}
90-
````
91-
92-
>caption The result from the snippet above, after hovering the "Services" item
93-
94-
![](images/menu-overview.png)
95-
96-
>caption Component namespace and reference
97-
98-
````CSHTML
99-
@using Telerik.Blazor.Components
100-
101-
<TelerikMenu @ref="theMenu" Data="@menuData" TextField="Page" UrlField="Page">
102-
</TelerikMenu>
103-
104-
@code {
105-
// the menu is a generic component and its type depends on the model it binds to
106-
Telerik.Blazor.Components.TelerikMenu<MenuItem> theMenu;
107-
108-
List<MenuItem> menuData = Enumerable.Range(1, 3).Select(x => new MenuItem { Page = $"page{x}" }).ToList();
109-
110-
public class MenuItem
111-
{
112-
public string Page { get; set; }
113-
}
114-
}
115-
````
116-
117-
118-
## Navigate Views
119-
120-
A menu is often used to list pages, views or sections in an application so the user can navigate through them. To do that with a menu, you have two options:
121-
122-
* Use the built-in `UrlField` in the [bound data]({%slug components/menu/data-binding/overview%}#data-bindings) to populate the URLs in the anchors the menu will generate for you if an URL is provided for the given item. An example is available in the beginning of this article.
123-
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
124-
125-
>tip You can find an example of a menu used to navigate between pages in an app in the [Navigation]({%slug menu-navigation%}) article.
126-
127-
## See Also
128-
129-
* [Data Binding a Menu]({%slug components/menu/data-binding/overview%})
130-
* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
131-
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)
132-
1+
---
2+
title: Overview
3+
page_title: Menu Overview
4+
description: Get an overview of the Menu for Blazor, and learn how to use it through practical examples.
5+
slug: components/menu/overview
6+
tags: telerik,blazor,menu,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Menu Overview
12+
13+
The <a href="https://www.telerik.com/blazor-ui/menu" target="_blank">Blazor Menu component</a> displays data (flat or hierarchical) in a traditional menu-like structure. In addition to built-in navigation capabilities, you can browse through the items and their children, define [templates]({%slug components/menu/templates%}) for the individual nodes, render text and icons/images, and respond to [events]({%slug components/menu/events%}).
14+
15+
## Creating Blazor Menu
16+
17+
1. Use the `TelerikMenu` tag to add the component to your razor page.
18+
19+
1. Populate the `Data` property with the collection of items that you want to appear in the menu.
20+
21+
1. Match the fields in the models with the binding schema for the nodes.
22+
23+
>caption Basic menu with hierarchical data binding and built-in navigation
24+
25+
````CSHTML
26+
Use a menu to navigate between views
27+
28+
<TelerikMenu Data="@MenuItems"
29+
UrlField="@nameof(MenuItem.Page)"
30+
ItemsField="@nameof(MenuItem.SubSectionList)"
31+
TextField="@nameof(MenuItem.Section)">
32+
</TelerikMenu>
33+
34+
@code {
35+
public List<MenuItem> MenuItems { get; set; }
36+
37+
public class MenuItem
38+
{
39+
public string Section { get; set; }
40+
public string Page { get; set; }
41+
public List<MenuItem> SubSectionList { get; set; }
42+
}
43+
44+
protected override void OnInitialized()
45+
{
46+
MenuItems = new List<MenuItem>()
47+
{
48+
new MenuItem()
49+
{
50+
Section = "Company", // items that don't have a URL will not render links
51+
SubSectionList = new List<MenuItem>()
52+
{
53+
new MenuItem()
54+
{
55+
Section = "Overview",
56+
Page = "company/overview"
57+
},
58+
new MenuItem()
59+
{
60+
Section = "Events",
61+
Page = "company/events"
62+
},
63+
new MenuItem()
64+
{
65+
Section = "Careers",
66+
Page = "company/careers"
67+
}
68+
}
69+
},
70+
new MenuItem()
71+
{
72+
Section = "Services",
73+
SubSectionList = new List<MenuItem>()
74+
{
75+
new MenuItem()
76+
{
77+
Section = "Consulting",
78+
Page = "consultingservices"
79+
},
80+
new MenuItem()
81+
{
82+
Section = "Education",
83+
Page = "education"
84+
}
85+
}
86+
}
87+
};
88+
89+
base.OnInitialized();
90+
}
91+
}
92+
````
93+
94+
## Navigate Views
95+
96+
A menu is often used to list pages, views, or sections in an application so the user can navigate through them. To do that with a menu, you have two options:
97+
98+
* Use the built-in `UrlField` in the [bound data]({%slug components/menu/data-binding/overview%}#data-bindings) to populate the URLs in the anchors that the menu will generate if you provide a URL for the given item. This approach is demonstrated in the [Creating Blazor Menu](#creating-blazor-menu) example.
99+
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
100+
101+
[Read more about the Blazor Menu navigation...]({%slug menu-navigation%})
102+
103+
## Events
104+
105+
The Blazor Menu generates events that you can handle and further customize its behavior. [Read more about the Blazor Menu events...]({%slug components/menu/events%})
106+
107+
## Templates
108+
109+
You can use the functionality of the built-in templates and customize what is rendered in the items. [Read more about the Blazor Menu templates...]({%slug components/menu/templates%})
110+
111+
## Data Binding
112+
113+
To show any items, the Blazor Menu requires a data source that you can provide through the `Data` property. The Menu allows you to display the items both as flat data and hierarchically. [Read more about the Blazor Menu data binding...]({%slug components/menu/data-binding/overview%})
114+
115+
## Orientation
116+
117+
The Blazor Menu allows you to control its orientation and display the items horizontally or vertically. [Read more about the Blazor Menu orientation...]({%slug components/menu/orientation%})
118+
119+
## Menu Icons
120+
121+
To illustrate the purpose of each menu item, the Blazor Menu allows you to add images, icon classes, or font icons. [Read more about the Blazor Menu icons...]({%slug menu-icons%})
122+
123+
## Menu Reference
124+
125+
The Menu is a generic component and its type depends on the type of the model that you use as its data source.
126+
127+
````CSHTML
128+
@using Telerik.Blazor.Components
129+
130+
<TelerikMenu @ref="theMenu" Data="@menuData" TextField="Page" UrlField="Page">
131+
</TelerikMenu>
132+
133+
@code {
134+
// the menu is a generic component and its type depends on the model it binds to
135+
Telerik.Blazor.Components.TelerikMenu<MenuItem> theMenu;
136+
137+
List<MenuItem> menuData = Enumerable.Range(1, 3).Select(x => new MenuItem { Page = $"page{x}" }).ToList();
138+
139+
public class MenuItem
140+
{
141+
public string Page { get; set; }
142+
}
143+
}
144+
````
145+
146+
## Next Steps
147+
148+
* [Binding the Menu to Data]({%slug components/menu/data-binding/overview%})
149+
150+
* [Using the Menu to Navigate between Pages]({%slug menu-navigation%})
151+
152+
## See Also
153+
154+
* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
155+
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)

0 commit comments

Comments
 (0)