Menubar
A horizontal application menu bar with multiple top-level menus, each opening a dropdown with items, submenus, checkboxes, and radio groups.
Divergence from Blok
No keyboard navigation. Blok's Menubar uses Radix UI which provides full keyboard support (arrow keys, Enter, Esc, roving focus). This Blazor port does not implement keyboard navigation — use mouse interaction. This is a known gap with no simple CSS-only workaround.
MenubarPortal is a no-op. In Blok, MenubarPortal portals content to document.body for z-index stacking. In Blazor, MenubarContent uses position:fixed directly, so MenubarPortal exists only for API parity and is a transparent pass-through wrapper.
Hover-to-switch is supported. When any menu is open and the user hovers over another trigger, the new menu opens automatically — matching standard menubar behaviour.
Examples
Default
With Submenu
With Checkbox Items
With Radio Group
Inset Items
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Menubar | Root horizontal bar container. Tracks all registered MenubarMenu children and closes any open menu when another opens. |
| MenubarMenu | State container for one top-level menu. Groups a MenubarTrigger and a MenubarContent. Registers with the parent Menubar to enable close-others-on-open behaviour. |
| MenubarTrigger | Button that toggles the parent MenubarMenu. Hovering while another menu is open immediately switches to this menu. |
| MenubarContent | Fixed-positioned dropdown panel that appears below the trigger. Uses JS-based collision avoidance to stay within the viewport. |
| MenubarGroup | Logical role="group" wrapper around a set of items. No visual styling — use MenubarSeparator to visually divide groups. |
| MenubarItem | Clickable menu row. Fires Click then closes the menu chain (sub and parent) on activation. |
| MenubarLabel | Non-interactive section heading rendered in medium-weight muted text. |
| MenubarSeparator | 1px horizontal rule used to divide sections within a MenubarContent. |
| MenubarShortcut | Right-aligned keyboard-hint label placed inside a MenubarItem. Rendered in small, tracked, muted text. |
| MenubarCheckboxItem | Togglable menu item. Renders a check icon indicator when Checked is true. Closes the menu on activation. |
| MenubarRadioGroup | Provides a shared selection value for child MenubarRadioItem components via a cascading parameter. |
| MenubarRadioItem | Single-selection menu item. Renders a filled circle indicator when its Value matches the parent MenubarRadioGroup value. Closes the menu on activation. |
| MenubarSub | Nested submenu state container. Tracks hover open/close and the trigger bounds so MenubarSubContent can position itself with collision avoidance. |
| MenubarSubTrigger | Hover-activated submenu opener. Displays a right chevron and opens the parent MenubarSub on mouseenter. |
| MenubarSubContent | Submenu surface. Renders to the right of its trigger with collision avoidance. Closes on mouseleave. |
| MenubarPortal | Pass-through wrapper that exists for API parity with Blok's MenubarPortal. In Blazor, MenubarContent uses position:fixed directly so no portal is needed. |
Menubar
Root horizontal bar container. Tracks all registered MenubarMenu children and closes any open menu when another opens.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the bar <div>. | |
| ChildContent | RenderFragment? | Should contain one or more MenubarMenu children. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the root <div>. |
MenubarMenu
State container for one top-level menu. Groups a MenubarTrigger and a MenubarContent. Registers with the parent Menubar to enable close-others-on-open behaviour.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one MenubarTrigger and one MenubarContent. |
MenubarTrigger
Button that toggles the parent MenubarMenu. Hovering while another menu is open immediately switches to this menu.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <button>. | |
| ChildContent | RenderFragment? | Trigger label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the <button>. |
MenubarContent
Fixed-positioned dropdown panel that appears below the trigger. Uses JS-based collision avoidance to stay within the viewport.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | DropdownMenuSide | Preferred opening side relative to the trigger. Default: Bottom. | |
| Align | DropdownMenuAlign | Alignment along the trigger's cross-axis. Default: Start. | |
| SideOffset | double | Gap in pixels between trigger and menu surface. Default: 8 (matches Blok's default). | |
| ClassName | string? | Extra CSS classes appended to the content <div>. | |
| ChildContent | RenderFragment? | Menu items — MenubarItem, MenubarLabel, MenubarGroup, MenubarSeparator, MenubarCheckboxItem, MenubarRadioGroup, nested MenubarSub. |
MenubarGroup
Logical role="group" wrapper around a set of items. No visual styling — use MenubarSeparator to visually divide groups.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | MenubarItem children belonging to this group. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the group <div>. |
MenubarItem
Clickable menu row. Fires Click then closes the menu chain (sub and parent) on activation.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | MenubarItemVariant | Visual style. Default: MenubarItemVariant.Default. Other value: Destructive (red text + red hover bg). | |
| Inset | bool | Adds pl-8 left padding so label-only items align with icon items. Default: false. | |
| Disabled | bool | When true, item is muted and ignores clicks. Default: false. | |
| Click | EventCallback | Invoked when the item is clicked, before the menu closes. | |
| ClassName | string? | Extra CSS classes appended to the item <div>. | |
| ChildContent | RenderFragment? | Item label and optional Icon / MenubarShortcut children. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the item <div>. |
MenubarLabel
Non-interactive section heading rendered in medium-weight muted text.
| Property | Type | Required | Description |
|---|---|---|---|
| Inset | bool | Adds pl-8 so the label aligns with inset items. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the label <div>. | |
| ChildContent | RenderFragment? | Heading text. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the label <div>. |
MenubarSeparator
1px horizontal rule used to divide sections within a MenubarContent.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator <div>. |
MenubarShortcut
Right-aligned keyboard-hint label placed inside a MenubarItem. Rendered in small, tracked, muted text.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <span>. | |
| ChildContent | RenderFragment? | Shortcut text (e.g. Ctrl+S). | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the <span>. |
MenubarCheckboxItem
Togglable menu item. Renders a check icon indicator when Checked is true. Closes the menu on activation.
| Property | Type | Required | Description |
|---|---|---|---|
| Checked | bool | Whether the item is checked. Default: false. | |
| CheckedChanged | EventCallback<bool> | Invoked with the new checked state when the item is clicked. | |
| Disabled | bool | When true, item is muted and ignores clicks. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the item <div>. | |
| ChildContent | RenderFragment? | Item label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the item <div>. |
MenubarRadioGroup
Provides a shared selection value for child MenubarRadioItem components via a cascading parameter.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | The currently selected value. | |
| ValueChanged | EventCallback<string?> | Invoked with the newly selected value when a child MenubarRadioItem is clicked. | |
| ChildContent | RenderFragment? | MenubarRadioItem children. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the group <div>. |
MenubarRadioItem
Single-selection menu item. Renders a filled circle indicator when its Value matches the parent MenubarRadioGroup value. Closes the menu on activation.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | The value this item represents. Compared against MenubarRadioGroup.Value to determine selected state. | |
| Disabled | bool | When true, item is muted and ignores clicks. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the item <div>. | |
| ChildContent | RenderFragment? | Item label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the item <div>. |
MenubarSub
Nested submenu state container. Tracks hover open/close and the trigger bounds so MenubarSubContent can position itself with collision avoidance.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one MenubarSubTrigger and one MenubarSubContent. |
MenubarSubTrigger
Hover-activated submenu opener. Displays a right chevron and opens the parent MenubarSub on mouseenter.
| Property | Type | Required | Description |
|---|---|---|---|
| Inset | bool | Adds pl-8 so the label aligns with inset items. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the trigger <div>. | |
| ChildContent | RenderFragment? | Trigger label. |
MenubarSubContent
Submenu surface. Renders to the right of its trigger with collision avoidance. Closes on mouseleave.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | DropdownMenuSide | Preferred opening side. Default: Right. Flips to Left when the right side overflows the viewport. | |
| Align | DropdownMenuAlign | Alignment along the trigger's cross-axis. Default: Start. | |
| SideOffset | double | Gap in pixels between subtrigger and submenu surface. Default: 0. | |
| ClassName | string? | Extra CSS classes appended to the submenu surface. | |
| ChildContent | RenderFragment? | Submenu items. |
MenubarPortal
Pass-through wrapper that exists for API parity with Blok's MenubarPortal. In Blazor, MenubarContent uses position:fixed directly so no portal is needed.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Content passed through unchanged. |