BlazorNova
BlazorNovaBnMenuBar
A theme-adaptive navigation menu with nested flyout sub-menus.
Top-level items sit in a horizontal bar by default; hovering a parent opens its children
in a panel below. Nested sub-menus open to the right at any depth.
Set Mode="MenuBarMode.Vertical" for a sidebar layout.
Basic Usage
Nest MenuItem components inside the Items fragment.
Each item can contain its own Items to any depth;
hovering a parent automatically opens a flyout for its children.
Navigation & Active State
Pass a Click handler and an IsSelected predicate to each item.
When IsSelected returns true the item renders in its active colour,
making it easy to reflect the current route or application state.
Active page: home
Custom Item Templates
When the Text label isn't enough, provide a Template fragment
to render arbitrary markup — icons, badges, or any content — inside the item.
<BnMenuBar>
<Items>
<MenuItem Id="home">
<Template>
<i class="fa fa-home" /> Home
</Template>
</MenuItem>
<MenuItem Id="settings">
<Template>
<i class="fa fa-cog" /> Settings
</Template>
</MenuItem>
</Items>
</BnMenuBar>Responsive Hamburger
Set HamburgerBreakpoint to a BlazorNovaBreakpoint value to
automatically switch to a hamburger menu on smaller screens. Below the chosen breakpoint
the horizontal bar is replaced by a hamburger icon that opens a BnDrawer
with the menu items in a vertical layout.
<BnMenuBar Mode="MenuBarMode.Horizontal"
HamburgerBreakpoint="BlazorNovaBreakpoint.MD"
ContainerModifier="@BnModifier.Create(x => x.w_full.p_2)">
<LeftContent>
<div class="@BlazorNova.New.text_3xl.font_bold">My App</div>
</LeftContent>
<Items>
<MenuItem Text="Home" Click="@(() => Nav.NavigateTo("/"))" />
<MenuItem Text="Docs" Click="@(() => Nav.NavigateTo("/docs"))" />
<MenuItem Text="About" Click="@(() => Nav.NavigateTo("/about"))" />
</Items>
</BnMenuBar>LeftContent & MiddleContent
LeftContent renders at the start of the bar (typically a logo or brand).
MiddleContent renders between the left content and the menu items.
The menu items are always pushed to the right via ml-auto, so you don't
need to add justify-between yourself. You can also provide a
HamburgerTemplate to customise the mobile toggle icon.
<BnMenuBar HamburgerBreakpoint="BlazorNovaBreakpoint.LG">
<LeftContent>
<img src="logo.png" style="height:32px" />
</LeftContent>
<MiddleContent>
<span>v1.0</span>
</MiddleContent>
<Items>
<MenuItem Text="Home" />
<MenuItem Text="Settings" />
</Items>
<HamburgerTemplate>
<i class="fa fa-bars" />
</HamburgerTemplate>
</BnMenuBar>