Skip to content

Merge docs-update-menu-overview-651 into production #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dimodi merged 2 commits into from
Jan 25, 2022
Merged

Merge docs-update-menu-overview-651 into production #736

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56f64f8
docs: update menu overview.md
yordan-mitev Dec 21, 2021
4fc56fc
docs: address feedback from review
yordan-mitev Jan 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
287 changes: 155 additions & 132 deletions components/menu/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,155 @@
---
title: Overview
page_title: Menu Overview
description: Overview of the Menu for Blazor.
slug: components/menu/overview
tags: telerik,blazor,menu,overview
published: True
position: 0
---

# Menu Overview

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%}).

#### To use a Telerik Menu for Blazor:

1. add the `TelerikMenu` tag
1. provide a collection of models to its `Data` property (read more in the [Data Binding article]({%slug components/menu/data-binding/overview%}))
1. match the fields in the models with the binding schema for the nodes

>caption Basic menu with hierarchical data binding and built-in navigation

````CSHTML
Use a menu to navigate between views

<TelerikMenu Data="@MenuItems"
UrlField="@nameof(MenuItem.Page)"
ItemsField="@nameof(MenuItem.SubSectionList)"
TextField="@nameof(MenuItem.Section)">
</TelerikMenu>

@code {
public List<MenuItem> MenuItems { get; set; }

public class MenuItem
{
public string Section { get; set; }
public string Page { get; set; }
public List<MenuItem> SubSectionList { get; set; }
}

protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Section = "Company", // items that don't have a URL will not render links
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Overview",
Page = "company/overview"
},
new MenuItem()
{
Section = "Events",
Page = "company/events"
},
new MenuItem()
{
Section = "Careers",
Page = "company/careers"
}
}
},
new MenuItem()
{
Section = "Services",
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Consulting",
Page = "consultingservices"
},
new MenuItem()
{
Section = "Education",
Page = "education"
}
}
}
};

base.OnInitialized();
}
}
````

>caption The result from the snippet above, after hovering the "Services" item

![](images/menu-overview.png)

>caption Component namespace and reference

````CSHTML
@using Telerik.Blazor.Components

<TelerikMenu @ref="theMenu" Data="@menuData" TextField="Page" UrlField="Page">
</TelerikMenu>

@code {
// the menu is a generic component and its type depends on the model it binds to
Telerik.Blazor.Components.TelerikMenu<MenuItem> theMenu;

List<MenuItem> menuData = Enumerable.Range(1, 3).Select(x => new MenuItem { Page = $"page{x}" }).ToList();

public class MenuItem
{
public string Page { get; set; }
}
}
````


## Navigate Views

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:

* 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.
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.

>tip You can find an example of a menu used to navigate between pages in an app in the [Navigation]({%slug menu-navigation%}) article.

## See Also

* [Data Binding a Menu]({%slug components/menu/data-binding/overview%})
* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)

---
title: Overview
page_title: Menu Overview
description: Get an overview of the Menu for Blazor, and learn how to use it through practical examples.
slug: components/menu/overview
tags: telerik,blazor,menu,overview
published: True
position: 0
---

# Menu Overview

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%}).

## Creating Blazor Menu

1. Use the `TelerikMenu` tag to add the component to your razor page.

1. Populate the `Data` property with the collection of items that you want to appear in the menu.

1. Match the fields in the models with the binding schema for the nodes.

>caption Basic menu with hierarchical data binding and built-in navigation

````CSHTML
Use a menu to navigate between views

<TelerikMenu Data="@MenuItems"
UrlField="@nameof(MenuItem.Page)"
ItemsField="@nameof(MenuItem.SubSectionList)"
TextField="@nameof(MenuItem.Section)">
</TelerikMenu>

@code {
public List<MenuItem> MenuItems { get; set; }

public class MenuItem
{
public string Section { get; set; }
public string Page { get; set; }
public List<MenuItem> SubSectionList { get; set; }
}

protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Section = "Company", // items that don't have a URL will not render links
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Overview",
Page = "company/overview"
},
new MenuItem()
{
Section = "Events",
Page = "company/events"
},
new MenuItem()
{
Section = "Careers",
Page = "company/careers"
}
}
},
new MenuItem()
{
Section = "Services",
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Consulting",
Page = "consultingservices"
},
new MenuItem()
{
Section = "Education",
Page = "education"
}
}
}
};

base.OnInitialized();
}
}
````

## Navigate Views

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:

* 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.
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.

[Read more about the Blazor Menu navigation...]({%slug menu-navigation%})

## Events

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%})

## Templates

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%})

## Data Binding

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%})

## Orientation

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%})

## Menu Icons

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%})

## Menu Reference

The Menu is a generic component and its type depends on the type of the model that you use as its data source.

````CSHTML
@using Telerik.Blazor.Components

<TelerikMenu @ref="theMenu" Data="@menuData" TextField="Page" UrlField="Page">
</TelerikMenu>

@code {
// the menu is a generic component and its type depends on the model it binds to
Telerik.Blazor.Components.TelerikMenu<MenuItem> theMenu;

List<MenuItem> menuData = Enumerable.Range(1, 3).Select(x => new MenuItem { Page = $"page{x}" }).ToList();

public class MenuItem
{
public string Page { get; set; }
}
}
````

## Next Steps

* [Binding the Menu to Data]({%slug components/menu/data-binding/overview%})

* [Using the Menu to Navigate between Pages]({%slug menu-navigation%})

## See Also

* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)