BlazorNova BlazorNova
BlazorNova BlazorNova
☰
☰ Menu
Getting Started
Installation
Project Setup
Source Generator
Core Concepts
Surface System
Color Palette
Fluent CSS API
Style Overrides
CSS Precedence
BlazorNova Classes
Layout
Flexbox & Grid
Spacing
Sizing
Typography
Backgrounds
Borders
Effects
Filters
Transitions & Transforms
Interactivity
Components
Forms
BnEditForm
FormState
Monitors
MenuBar
Horizontal
Vertical
Tabs
BnTab
Icons
Icon Gallery
Buttons
BnButton
Layout
BnStackPanel
BnDrawer
Grid
BnGrid
BnPagedGrid
Navigation
BnNavigator
Carousel
BnCarousel
Charts
BnChart
PDF Viewer
BnPdfViewer
Meet
BnVideoCall

BnMenuBar — Vertical

Setting Mode="MenuBarMode.Vertical" stacks top-level items in a column, making BnMenuBar suitable for sidebars and navigation panels. Sub-menus open as flyouts to the right rather than below the bar. All other parameters and patterns are identical to the horizontal variant.

Vertical Layout

Wrap the menu in a fixed-width container to control its width in a sidebar. The active-state pattern works exactly the same as the horizontal variant.

Controlling Width

The menu bar stretches to fill its container by default. Constrain the width either with a wrapper element (as shown above) or via ContainerModifier to add a fixed width directly to the menu surface.

razor 
@* Option 1 — wrapper element *@
<div style="width:200px;">
    <BnMenuBar Mode="MenuBarMode.Vertical">...</BnMenuBar>
</div>

@* Option 2 — ContainerModifier *@
<BnMenuBar Mode="MenuBarMode.Vertical"
           ContainerModifier="@BnModifier.Create(x => x.W(\"200px\"))">
    ...
</BnMenuBar>