Menu displays a set of actions triggered by a button, with support for submenus, group labels, separators, checkbox items and radio groups. It can be controlled (@bind-Open) or uncontrolled (DefaultOpen); the engine self-portals the Popup to document.body to escape clipping and stacking ancestors.

Anatomy

@using Navius.Primitives.Components.Menu

<NaviusMenu>
    <NaviusMenuTrigger />

    <NaviusMenuPortal>
        <NaviusMenuPositioner>
            <NaviusMenuPopup>
                <NaviusMenuGroupLabel />
                <NaviusMenuItem />

                <NaviusMenuGroup>
                    <NaviusMenuGroupLabel />
                    <NaviusMenuItem />
                </NaviusMenuGroup>

                <NaviusMenuCheckboxItem>
                    <NaviusMenuItemIndicator />
                </NaviusMenuCheckboxItem>

                <NaviusMenuRadioGroup>
                    <NaviusMenuRadioItem>
                        <NaviusMenuItemIndicator />
                    </NaviusMenuRadioItem>
                </NaviusMenuRadioGroup>

                <NaviusMenuSeparator />

                <NaviusMenuSub>
                    <NaviusMenuSubTrigger />
                    <NaviusMenuSubContent>
                        <NaviusMenuItem />
                    </NaviusMenuSubContent>
                </NaviusMenuSub>

                <NaviusMenuArrow />
            </NaviusMenuPopup>
        </NaviusMenuPositioner>
    </NaviusMenuPortal>
</NaviusMenu>

Root

Prop	Type	Default	Description
`Open`	`bool`	`false`	Controlled open state. Pair with `OpenChanged` (`@bind-Open`).
`OpenChanged`	`EventCallback<bool>`	-	Fires when the controlled `Open` value should change.
`DefaultOpen`	`bool`	`false`	Initial open state when used uncontrolled.
`Modal`	`bool`	`true`	When modal, the open menu locks page scroll and blocks outside pointer interaction.
`Dir`	`string?`	-	Reading direction (`"ltr"` / `"rtl"`); flips submenu arrow keys. Falls back to a cascaded direction provider.
`ChildContent`	`RenderFragment?`	-	The menu’s parts.

Trigger

Prop	Type	Default	Description
`Disabled`	`bool`	`false`	-
`ChildContent`	`RenderFragment?`	-	Trigger label content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button`.

Portal

Prop	Type	Default	Description
`Container`	`string?`	-	CSS selector for the mount target. `null` uses `document.body`.
`KeepMounted`	`bool`	`false`	Keeps the Popup mounted while closed, driving exit transitions off `data-closed` instead of unmounting.
`ChildContent`	`RenderFragment?`	-	The Positioner and Popup.

Positioner

Prop	Type	Default	Description
`Side`	`string`	`"bottom"`	-
`Align`	`string`	`"center"`	-
`SideOffset`	`double`	`0`	-
`AlignOffset`	`double`	`0`	-
`Flip`	`bool`	`true`	-
`AvoidCollisions`	`bool`	`true`	-
`CollisionPadding`	`double?`	-	-
`ArrowPadding`	`double`	`0`	-
`ChildContent`	`RenderFragment?`	-	The Popup.

Prop	Type	Default	Description
`Loop`	`bool`	`false`	When true, arrow navigation wraps at the ends.
`KeepMounted`	`bool`	`false`	Keeps the popup mounted while closed, for exit animations.
`OnEscapeKeyDown`	`EventCallback<NaviusEscapeKeyDownEventArgs>`	-	Fires on `Escape`; cancelable.
`OnPointerDownOutside`	`EventCallback<NaviusPointerDownOutsideEventArgs>`	-	Fires on pointer-down outside the popup; cancelable.
`ChildContent`	`RenderFragment?`	-	The menu’s content.

GroupLabel

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Label content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Item

Prop	Type	Default	Description
`OnSelect`	`EventCallback<NaviusSelectEventArgs>`	-	Fires when the item is chosen (click or Enter/Space). `PreventDefault()` keeps the menu open.
`Disabled`	`bool`	`false`	-
`TextValue`	`string?`	-	Overrides the text the typeahead matches against.
`ChildContent`	`RenderFragment?`	-	Item content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Group

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	The group’s items, preceded by a GroupLabel.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

CheckboxItem

Prop	Type	Default	Description
`Checked`	`bool?`	-	Controlled checked state: `true` / `false` / `null` (indeterminate). Pair with `CheckedChanged` (`@bind-Checked`).
`CheckedChanged`	`EventCallback<bool?>`	-	Fires when the controlled `Checked` should change.
`DefaultChecked`	`bool?`	-	Initial checked state when uncontrolled (`null` = indeterminate).
`OnSelect`	`EventCallback<NaviusSelectEventArgs>`	-	Cancelable; `PreventDefault()` keeps the menu open after toggling.
`Disabled`	`bool`	`false`	-
`TextValue`	`string?`	-	-
`ChildContent`	`RenderFragment?`	-	Item content (typically includes an ItemIndicator).
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

RadioGroup

Prop	Type	Default	Description
`Value`	`string?`	-	Controlled selected value. Pair with `ValueChanged` (`@bind-Value`).
`ValueChanged`	`EventCallback<string?>`	-	Fires when the controlled `Value` should change.
`DefaultValue`	`string?`	-	Initial selected value when uncontrolled.
`ChildContent`	`RenderFragment?`	-	The group’s RadioItems.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

RadioItem

Prop	Type	Default	Description
`Value`	`string`	-	This item’s value; selected when it equals the group’s value.
`OnSelect`	`EventCallback<NaviusSelectEventArgs>`	-	Cancelable; `PreventDefault()` keeps the menu open after selecting.
`Disabled`	`bool`	`false`	-
`TextValue`	`string?`	-	-
`ChildContent`	`RenderFragment?`	-	Item content (typically includes an ItemIndicator).
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

ItemIndicator

Prop	Type	Default	Description
`ForceMount`	`bool`	`false`	Keeps the indicator mounted even when unchecked, for CSS exit animations.
`ChildContent`	`RenderFragment?`	-	The check/dot glyph.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `span`.

Separator

Prop	Type	Default	Description
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Sub

Prop	Type	Default	Description
`Open`	`bool`	`false`	Controlled open state for this submenu. Pair with `OpenChanged` (`@bind-Open`).
`OpenChanged`	`EventCallback<bool>`	-	Fires when the controlled `Open` should change.
`DefaultOpen`	`bool`	`false`	Initial open state when uncontrolled.
`ChildContent`	`RenderFragment?`	-	The SubTrigger and SubContent.

SubTrigger

Prop	Type	Default	Description
`Disabled`	`bool`	`false`	-
`TextValue`	`string?`	-	-
`ChildContent`	`RenderFragment?`	-	Item content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

SubContent

Prop	Type	Default	Description
`SideOffset`	`double`	`0`	Distance in px from the trigger.
`AlignOffset`	`double`	`0`	Offset in px along the alignment axis.
`Loop`	`bool`	`false`	When true, arrow navigation wraps at the ends.
`ForceMount`	`bool`	`false`	Keeps the submenu mounted while closed, for exit animations.
`ChildContent`	`RenderFragment?`	-	The submenu’s items.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Arrow

Prop	Type	Default	Description
`Width`	`double`	`10`	-
`Height`	`double`	`5`	-
`ChildContent`	`RenderFragment?`	-	Overrides the default downward-triangle glyph.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `svg`.

Data attributes

Part	Attribute	Description
Trigger	`data-popup-open`	Present while the menu is open.
Trigger	`data-disabled`	Present when disabled.
Popup	`data-open`	Present while the menu is open.
Popup	`data-closed`	Present while closing (through the exit transition).
Popup	`data-starting-style`	Present on the first committed open frame.
Popup	`data-ending-style`	Present while animating out.
Popup	`data-side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`
Popup	`data-align`	`"start"` \| `"center"` \| `"end"`
Item	`data-highlighted`	Present when the item is the roving-focus target.
Item	`data-disabled`	Present when disabled.
CheckboxItem	`data-checked`	Present when checked.
CheckboxItem	`data-unchecked`	Present when unchecked.
CheckboxItem	`data-indeterminate`	Present when indeterminate.
CheckboxItem	`data-highlighted`	Present when the item is the roving-focus target.
CheckboxItem	`data-disabled`	Present when disabled.
RadioItem	`data-checked`	Present when checked.
RadioItem	`data-unchecked`	Present when unchecked.
RadioItem	`data-highlighted`	Present when the item is the roving-focus target.
RadioItem	`data-disabled`	Present when disabled.
ItemIndicator	`data-checked`	Present when the parent item is checked.
ItemIndicator	`data-unchecked`	Present when the parent item is unchecked.
ItemIndicator	`data-indeterminate`	Present when the parent item is indeterminate.
SubTrigger	`data-popup-open`	Present while the submenu is open.
SubTrigger	`data-highlighted`	Present when the item is the roving-focus target.
SubTrigger	`data-disabled`	Present when disabled.
SubContent	`data-open`	Present while the submenu is open.
SubContent	`data-closed`	Present while closing (through the exit transition).

Keyboard interactions

Key	Behavior
`Space`	When focus is on the trigger, opens the menu and focuses the first item. When on an item, activates it.
`Enter`	When focus is on the trigger, opens the menu and focuses the first item. When on an item, activates it. On a SubTrigger, opens the submenu and focuses its first item.
`ArrowDown`	When focus is on the trigger, opens the menu. When inside, moves focus to the next item.
`ArrowUp`	When focus is on the trigger, opens the menu. When inside, moves focus to the previous item.
`ArrowRight`	On a SubTrigger, opens its submenu and focuses the first item (`ArrowLeft` in RTL).
`ArrowLeft`	Inside a submenu, closes it and returns focus to the SubTrigger (`ArrowRight` in RTL).
`Escape`	Closes the menu (or the current submenu) and returns focus to the trigger.
`Tab`	Items are not in the tab sequence; focus is managed with a roving tabindex.

ARIA mechanism

Implements the roles, states, and keyboard map of the menu button WAI-ARIA APG pattern: the Trigger wires aria-haspopup="menu", aria-expanded, and aria-controls; the Popup renders role="menu", aria-labelledby pointing at the Trigger’s id, with items as role="menuitem" (menuitemcheckbox / menuitemradio for the checkbox and radio variants). A Group wires role="group"; when it contains a GroupLabel, the Group’s aria-labelledby points at the label so the group is announced with its heading. Focus is fully managed: opening focuses the first item, closing returns focus to the trigger, and roving tabindex (not a focus trap) moves focus within. The engine self-portals the Popup to document.body to escape clipping and stacking ancestors. This behavior is covered by the Playwright browser test suite and gated by axe-core in CI.

Menu

Overview