Ant Design Blazor
Menu
A versatile menu for navigation.
When To Use
Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
More layouts with navigation: Layout.
Examples
Horizontal top navigation menu.
Vertical menu with inline submenus.
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
Inline menu could be collapsed.
Here is a complete demo with sider layout.
Also can use accordion mode, click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
Submenus open as pop-ups.
There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
Show the dynamic switching mode (between 'inline' and 'vertical').
Automatically activate menu items based on routing, use MenuLink property.
IconTemplate allows for customized icons to be used in the Menu.
Menu API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Theme | ParameterColor theme of the menu | MenuTheme | MenuTheme.Light |
| Mode | ParameterType of menu | MenuMode | MenuMode.Vertical |
| ChildContent | ParameterContent of menu. Should contain MenuItem elements. | RenderFragment | -- |
| OnSubmenuClicked | ParameterCallback when submenu is clicked | EventCallback<SubMenu> | -- |
| OnMenuItemClicked | ParameterCallback when a main menu item is clicked | EventCallback<MenuItem> | -- |
| Accordion | ParameterAccordion mode. When true only one submenu can be open at a time. | Boolean | false |
| Selectable | ParameterAllows selecting menu items. When it is false the menu item is not selected after OnClick. | Boolean | true |
| Multiple | ParameterAllows selection of multiple items | Boolean | false |
| InlineCollapsed | ParameterSpecifies the collapsed status when menu is inline mode | Boolean | false |
| InlineIndent | ParameterIndent (in pixels) of inline menu items on each level | Int32 | 24 |
| AutoCloseDropdown | ParameterClose dropdown when clicking an item | Boolean | true |
| DefaultSelectedKeys | ParameterArray with the keys of default selected menu items | IEnumerable<String> | -- |
| DefaultOpenKeys | ParameterArray with the keys of default opened sub menus | IEnumerable<String> | -- |
| OpenKeys | ParameterArray with the keys of currently opened sub-menus | String[] | -- |
| OpenKeysChanged | ParameterCallback when the open sub menus change. Passed the array of open keys. | EventCallback<String[]> | -- |
| OnOpenChange | ParameterCallback when the open sub menus change. Passed the array of open keys. | EventCallback<String[]> | -- |
| SelectedKeys | ParameterArray with the keys of currently selected menu items, set empty array to clear selection instead of null. | String[] | [] |
| SelectedKeysChanged | ParameterCallback when the selected items change. Passed array of open keys. | EventCallback<String[]> | -- |
| TriggerSubMenuAction | ParameterWhich action can trigger submenu open/close | Trigger | Trigger.Hover |
| ShowCollapsedTooltip | ParameterShow tooltip on collapsed menu | Boolean | -- |
| Animation | ParameterEnable or disable animation | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
MenuItem API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterDisplay title | RenderFragment | -- |
| Key | ParameterUnique ID of the menu item | String | Uniquely Generated ID |
| Disabled | ParameterWhether menu item is disabled | Boolean | false |
| OnClick | ParameterCallback for when item is clicked | EventCallback<MouseEventArgs> | -- |
| RouterLink | ParameterHref route | String | -- |
| RouterMatch | ParameterModifies the URL matching behavior for a NavLink | NavLinkMatch | NavLinkMatch.All |
| Title | ParameterTitle of the menu item | String | -- |
| Icon | ParameterIcon of the menu item | String | -- |
| IconTemplate | ParameterCustom icon template, when Icon and IconTemplate are set at the same time, IconTemplate is preferred | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
SubMenu API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Placement | ParameterMenu placement | Placement? | -- |
| PopupClassName | Parameterclass name of the popup | String | -- |
| Title | ParameterTitle | String | -- |
| TitleTemplate | ParameterTitle template | RenderFragment | -- |
| ChildContent | ParameterSubMenus or SubMenu items | RenderFragment | -- |
| Key | ParameterUnique ID of the SubMenu | String | Uniquely Generated ID |
| Disabled | ParameterWhether SubMenu is disabled | Boolean | false |
| IsOpen | ParameterOpen state of the SubMenu | Boolean | false |
| OnTitleClick | ParameterCallback executed when the SubMenu title is clicked | EventCallback<MouseEventArgs> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
MenuItemGroup API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Title | ParameterTitle of the group | String | -- |
| TitleTemplate | ParameterTitle of the group | RenderFragment | -- |
| ChildContent | ParameterSubMenus or MenuItems | RenderFragment | -- |
| Key | ParameterUnique ID | String | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
MenuDivider API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |