Menu
Namespace
using Blazor_Foundation_6.Components.Navigation;
Attributes
Menu
Name | Description |
---|---|
Id | Default html id=”” attribute. |
Class | Extra/Custom Classes appended to the default class. |
Style | Style is normal HTML style. |
HasDropdown | True/False. Activate Menu to Contain Dropdown Elements… (Cannot be Activate HasDrilldown and HasAccordion at same time). (See Plugin Options). |
HasDrilldown | True/False. Activate Menu to Contain Drilldown Elements… (Cannot be Activate HasDropdown and HasAccordion at same time). (See Plugin Options). |
HasAccordion | True/False. Activate Menu to Contain Accordion Elements… (Cannot be Activate HasDropdown and HasDrilldown at same time). (See Plugin Options). |
IsNestedMenu | True/False. True if the menu IS a nested menu inside another menu. |
Vertical | True/False. True if you want the menu to be lined vertically. |
AutoManaged | True/False. Blazor will auto manage Foundation Zurb’s Javascript. |
DataOptions | Can include any option available. Check above the plugin options for the different type of menus. |
Examples
To see visual example, visit Foundation or Download and Run Blazor_Foundation_Test in Visual Studio.
@* This is a normal menu nothing special*@ <Menu> <li><a>Menu One</a></li> <li><a>Menu Two</a></li> <li><a>Menu Three</a></li> <li><a>Menu Four</a></li> </Menu>
@* This is a dropdown menu *@ <Menu id="MenuDropDownTest" HasDropdown="true"> <li> <a>Menu One</a> <Menu IsNestedMenu="true"> <li> <a>Dropdown A</a> </li> </Menu> </li> <li><a>Menu Two</a></li> <li><a>Menu Three</a></li> <li><a>Menu Four</a></li> </Menu>
@* This is a Vertical Drilldown menu *@ <Menu Vertical="true" HasDrilldown="true" id="DrillMenuTest"> <li> <a>Menu One</a> <Menu IsNestedMenu="true" Vertical="true"> <li> <a>DrillMenu A</a> </li> <li> <a>DrillMenu B</a> </li> <li> <a>DrillMenu C</a> </li> <li> <a>DrillMenu D</a> </li> </Menu> </li> <li><a>Menu Two</a></li> <li><a>Menu Three</a></li> <li><a>Menu Four</a></li> </Menu>