Skip to content

Commit 967d221

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Navigation articles (#70)
* feat(menu): navigation article initial commit * docs(treeview): navigation article * chore(docs): fixed typos * chore(menu): improvements on the navigation article * chore(treeview): improve navigation article Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent ce51dcf commit 967d221

File tree

2 files changed

+214
-0
lines changed

2 files changed

+214
-0
lines changed

‎components/menu/navigation.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Navigation
3+
page_title: Menu for Blazor | Navigation
4+
description: Using the Blazor Menu for navigating between pages
5+
slug: menu-navigation
6+
tags: telerik,blazor,menu,navigation
7+
published: True
8+
position: 3
9+
---
10+
11+
# Menu for Navigation
12+
13+
The Menu can be used to navigate between different pages in the applicaiton. It can generate the needed links for you through its `UrlField` when [data binding]({%slug components/menu/data-binding/overview%}).
14+
15+
To use the Menu for navigating between pages:
16+
17+
* Add the Menu to your application.
18+
* You may want to add it in the `MainLayout.razor` outside of the `@Body`, for example, in the header section of your app.
19+
* Provide a collection of models that describe the pages you want the user to navigate to.
20+
* Populate its `UrlField` with the corresponding data from the model or provide a `Url` property in the model.
21+
22+
>caption Use the Menu to navigate between pages
23+
24+
````CSHTML
25+
@* This a basic example of a Menu used as Navigation. *@
26+
27+
<TelerikMenu Data="@MenuData"></TelerikMenu>
28+
29+
30+
@code {
31+
public List<MenuModel> MenuData { get; set; }
32+
33+
protected override void OnInitialized()
34+
{
35+
GenerateMenuData();
36+
}
37+
38+
public void GenerateMenuData()
39+
{
40+
MenuData = new List<MenuModel>()
41+
{
42+
new MenuModel()
43+
{
44+
Text = "Contact us",
45+
Url = "/contacts",
46+
Icon = IconName.Email
47+
},
48+
new MenuModel()
49+
{
50+
Text = "Settings",
51+
Url = "/settings",
52+
Icon = IconName.Gear,
53+
Items = new List<MenuModel>()
54+
{
55+
new MenuModel()
56+
{
57+
Text = "Profile Settings",
58+
Url = "/profile",
59+
Icon = IconName.User
60+
},
61+
new MenuModel()
62+
{
63+
Text = "Language Settings",
64+
Url = "/language",
65+
Icon = IconName.Table
66+
}
67+
}
68+
}
69+
};
70+
}
71+
72+
public class MenuModel
73+
{
74+
public string Text { get; set; }
75+
public string Url { get; set; }
76+
public string Icon { get; set; }
77+
public List<MenuModel> Items { get; set; }
78+
}
79+
}
80+
````
81+
82+
## See Also
83+
84+
* [Menu Overview]({%slug components/menu/overview%})
85+
* [Menu Data Binding]({%slug components/menu/data-binding/overview%})
86+
* [Menu Templates]({%slug components/menu/templates%})

‎components/treeview/navigation.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: Navigation
3+
page_title: TreeView for Blazor | Navigation
4+
description: Using the Blazor TreeView for navigating between pages
5+
slug: treeview-navigation
6+
tags: telerik,blazor,treeview,navigation
7+
published: True
8+
position: 3
9+
---
10+
11+
# TreeView for Navigation
12+
13+
The TreeView can be used to navigate between different pages in the applicaiton. It can generate the needed links for you through its `UrlField` when [data binding]({%slug components/treeview/data-binding/overview%}).
14+
15+
To use the TreeView for navigating between pages:
16+
17+
* Add the TreeView to your application.
18+
* You may want to add it in the `MainLayout.razor` outside of the @Body, for example, in the sidebar section of your app.
19+
* Provide a collection of models that describe the pages you want the user to navigate to.
20+
* Populate its `UrlField` with the corresponding data from the model or provide a `Url` property in the model.
21+
22+
>caption Use the TreeView to navigate between pages
23+
24+
````CSHTML
25+
@* This a basic example of a TreeView used as Navigation. *@
26+
@* The items that does not have a set Url are not navigation links *@
27+
28+
<TelerikTreeView Data="@TreeViewData"></TelerikTreeView>
29+
30+
@code {
31+
public List<TreeViewModel> TreeViewData { get; set; }
32+
33+
protected override void OnInitialized()
34+
{
35+
GenerateData();
36+
}
37+
38+
public void GenerateData()
39+
{
40+
TreeViewData = new List<TreeViewModel>();
41+
42+
TreeViewData.Add(new TreeViewModel()
43+
{
44+
Id = 1,
45+
Text = "Company",
46+
ParentId = null,
47+
HasChildren = true
48+
});
49+
50+
TreeViewData.Add(new TreeViewModel()
51+
{
52+
Id = 2,
53+
Text = "Overview",
54+
ParentId = 1,
55+
HasChildren = false,
56+
Url = "/company/overview"
57+
});
58+
59+
TreeViewData.Add(new TreeViewModel()
60+
{
61+
Id = 3,
62+
Text = "Contact us",
63+
ParentId = 1,
64+
HasChildren = false,
65+
Url = "/company/contacts"
66+
});
67+
68+
TreeViewData.Add(new TreeViewModel()
69+
{
70+
Id = 4,
71+
Text = "Our mission",
72+
ParentId = 1,
73+
HasChildren = false,
74+
Url = "/company/mission"
75+
});
76+
77+
TreeViewData.Add(new TreeViewModel()
78+
{
79+
Id = 5,
80+
Text = "Products",
81+
ParentId = null,
82+
HasChildren = true
83+
});
84+
85+
TreeViewData.Add(new TreeViewModel()
86+
{
87+
Id = 6,
88+
Text = "Core product",
89+
ParentId = 5,
90+
HasChildren = true,
91+
Url = "/producs/core"
92+
});
93+
94+
TreeViewData.Add(new TreeViewModel()
95+
{
96+
Id = 7,
97+
Text = "Main product",
98+
ParentId = 6,
99+
HasChildren = false,
100+
Url = "/producs/core/main"
101+
});
102+
103+
TreeViewData.Add(new TreeViewModel()
104+
{
105+
Id = 8,
106+
Text = "Other products",
107+
ParentId = 5,
108+
HasChildren = false,
109+
Url = "/producs/other"
110+
});
111+
}
112+
113+
public class TreeViewModel
114+
{
115+
public int Id { get; set; }
116+
public string Text { get; set; }
117+
public string Url { get; set; }
118+
public bool HasChildren { get; set; }
119+
public int? ParentId { get; set; }
120+
}
121+
}
122+
````
123+
124+
## See Also
125+
126+
* [TreeView Overview]({%slug components/treeview/overview%})
127+
* [TreeView Data Binding]({%slug components/treeview/data-binding/overview%})
128+
* [TreeView Templates]({%slug components/treeview/templates%})

0 commit comments

Comments
 (0)