Menu

The Menu component family helps you build vertical navigation with grouped labels, nested items, and route-aware links.

API Documentation

How it works #

The Menu component family wraps Bulma's vertical navigation structure so you can build grouped navigation with labels, item lists, nested items, and route-aware links.

How to use:
  1. Wrap the overall navigation in <Menu>.
  2. Use <MenuLabel> to introduce each section.
  3. Place one or more <MenuItem> entries inside <MenuList>.
  4. Set Href on menu items when they should navigate, or provide custom markup inside a menu item when you need a nested branch.
This first example shows the smallest common shape: labels with navigable menu items underneath each section. 
<div style="max-width: 18rem;">
    <Menu>
        <MenuLabel>Components</MenuLabel>
        <MenuList>
            <MenuItem Href="@DemoRouteConstants.Demos_Menu_Documentation" Match="MenuItemMatch.All">Menu</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Card_Documentation">Card</MenuItem>
        </MenuList>

        <MenuLabel>More Components</MenuLabel>
        <MenuList>
            <MenuItem Href="@DemoRouteConstants.Demos_Pagination_Documentation">Pagination</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Message_Documentation">Message</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Grid_Documentation">Grid</MenuItem>
        </MenuList>
    </Menu>
</div>
MenuItem behaves differently depending on whether you provide an Href.

What to expect:
  1. With Href, MenuItem renders a route-aware NavLink.
  2. Without Href, MenuItem renders only the list item wrapper, so you can supply your own anchor or nested markup inside it.
  3. Use IsActive="true" to force the active style on generated links, and use Match to control automatic route matching.
This behavior is what makes nested menu branches possible without adding a second specialized item component.

Nested items #

Bulma menus support a second level of navigation by nesting another MenuList inside a parent MenuItem. This is useful for grouped sub-navigation such as administration areas or settings categories.

How to use:
  1. Create a parent MenuItem without an Href.
  2. Add a plain <a> or other custom markup for the parent label.
  3. Nest a second MenuList with child MenuItem links inside that parent item.
This demo mirrors the nested structure from the Bulma menu pattern. 
<div style="max-width: 18rem;">
    <Menu>
        <MenuLabel>Navigation Components</MenuLabel>
        <MenuList>
            <MenuItem Href="@DemoRouteConstants.Demos_Navbar_Documentation">Navbar</MenuItem>
            <MenuItem>
                <a class="is-active">MenuItem Nesting</a>
                <MenuList>
                    <MenuItem Href="@DemoRouteConstants.Demos_Breadcrumb_Documentation">Breadcrumb</MenuItem>
                    <MenuItem Href="@DemoRouteConstants.Demos_Dropdown_Documentation">Dropdown</MenuItem>
                    <MenuItem Href="@DemoRouteConstants.Demos_Form_TextInput_Documentation">Text Input</MenuItem>
                </MenuList>
            </MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_ConfirmDialog_Documentation">Confirm Dialog</MenuItem>
        </MenuList>
    </Menu>
</div>

Active state and matching #

The MenuItem component can highlight the current route automatically through NavLink matching, and it can also be forced into the active style with IsActive="true".

How to use:
  1. Set Href to turn a menu item into a route-aware navigation link.
  2. Use Match="MenuItemMatch.All" when you want exact matching for the current page.
  3. Use IsActive="true" when you want to force the active styling on a linked item.
This example shows one link that matches the current page exactly and another that is highlighted explicitly. 
<div style="max-width: 18rem;">
    <Menu>
        <MenuLabel>Navigation</MenuLabel>
        <MenuList>
            <MenuItem Href="@DemoRouteConstants.Demos_Menu_Documentation" Match="MenuItemMatch.All">Menu</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Breadcrumb_Documentation" IsActive="true">Breadcrumb</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Pagination_Documentation">Pagination</MenuItem>
        </MenuList>
    </Menu>
</div>

Methods #

Name Return type Description
Toggle() - Toggles the menu visibility.
The Menu component exposes a Toggle() method so you can show or hide it programmatically through an @ref. This is especially useful for mobile sidebars or compact layouts.

How to use:
  1. Add @ref="menuRef" to the Menu component.
  2. Call menuRef.Toggle() from a button click or other UI event.
  3. Use IsVisible only for the initial rendered state when you plan to toggle through the component API.
This demo uses a button to toggle the menu open and closed. 
<Buttons Class="mb-4">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ToggleMenu">Toggle Menu</Button>
</Buttons>

<div style="max-width: 18rem;">
    <Menu @ref="menuRef">
        <MenuLabel>Quick actions</MenuLabel>
        <MenuList>
            <MenuItem Href="@DemoRouteConstants.Demos_Menu_Documentation" Match="MenuItemMatch.All">Menu</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Dropdown_Documentation">Dropdown</MenuItem>
            <MenuItem Href="@DemoRouteConstants.Demos_Tabs_Documentation">Tabs</MenuItem>
        </MenuList>
    </Menu>
</div>

@code {
    private Menu menuRef = default!;

    private void ToggleMenu() => menuRef.Toggle();
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!