Menu

Namespace

using Blazor_Foundation_6.Components.Navigation;

Attributes

Menu

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
StyleStyle is normal HTML style.
HasDropdownTrue/False. Activate Menu to Contain Dropdown Elements… (Cannot be Activate HasDrilldown and HasAccordion at same time). (See Plugin Options).
HasDrilldownTrue/False. Activate Menu to Contain Drilldown Elements… (Cannot be Activate HasDropdown and HasAccordion at same time). (See Plugin Options).
HasAccordionTrue/False. Activate Menu to Contain Accordion Elements… (Cannot be Activate HasDropdown and HasDrilldown at same time). (See Plugin Options).
IsNestedMenuTrue/False. True if the menu IS a nested menu inside another menu.
VerticalTrue/False. True if you want the menu to be lined vertically.
AutoManagedTrue/False. Blazor will auto manage Foundation Zurb’s Javascript.
DataOptionsCan 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>