Components / Menu

Displays a menu to the user (triggered by a button) with items, checkbox and radio items, labels, separators, and nested submenus. role="menu", fully keyboard-navigable, portalled and positioned by the engine. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor

<ZitsMenu>
    <ZitsMenuTrigger class="...">Open</ZitsMenuTrigger>
    <ZitsMenuContent class="w-56" Align="start">
        <ZitsMenuLabel>My Account</ZitsMenuLabel>
        <ZitsMenuSeparator />
        <ZitsMenuGroup>
            <ZitsMenuItem>
                Profile <ZitsMenuShortcut>⇧⌘P</ZitsMenuShortcut>
            </ZitsMenuItem>
            <ZitsMenuItem>Billing</ZitsMenuItem>
        </ZitsMenuGroup>
        <ZitsMenuSeparator />
        <ZitsMenuCheckboxItem @bind-Checked="_statusBar">Status Bar</ZitsMenuCheckboxItem>
        <ZitsMenuSeparator />
        <ZitsMenuRadioGroup @bind-Value="_position">
            <ZitsMenuRadioItem Value="top">Top</ZitsMenuRadioItem>
            <ZitsMenuRadioItem Value="bottom">Bottom</ZitsMenuRadioItem>
        </ZitsMenuRadioGroup>
        <ZitsMenuSeparator />
        <ZitsMenuSub>
            <ZitsMenuSubTrigger>Invite users</ZitsMenuSubTrigger>
            <ZitsMenuSubContent>
                <ZitsMenuItem>Email</ZitsMenuItem>
                <ZitsMenuItem>Message</ZitsMenuItem>
            </ZitsMenuSubContent>
        </ZitsMenuSub>
    </ZitsMenuContent>
</ZitsMenu>

@code {
    private bool? _statusBar = true;
    private string? _position = "bottom";
}

Installation

Terminal bash

navius add menu

API reference

ZitsMenu

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Modal	bool	true
Dir	string?	"ltr"

ZitsMenuContent

Prop	Type	Default
Side	string	"bottom"
Align	string	"center"
SideOffset	double	4
AlignOffset	double	0
Loop	bool	false

ZitsMenuItem

Prop	Type	Default
OnSelect	EventCallback<NaviusSelectEventArgs>	-
Disabled	bool	false
Inset	bool	false
TextValue	string?	-

ZitsMenuCheckboxItem

Prop	Type	Default
Checked	bool?	-
DefaultChecked	bool?	-
OnSelect	EventCallback<NaviusSelectEventArgs>	-
Disabled	bool	false
TextValue	string?	-

ZitsMenuRadioGroup / ZitsMenuRadioItem

Prop	Type	Default
Value	string?	-
DefaultValue	string?	-
ValueChanged	EventCallback<string?>	-
Value (item)	string	-
Disabled (item)	bool	false

ZitsMenuSub / ZitsMenuSubContent

Prop	Type	Default
Open	bool	false
DefaultOpen	bool	false
OpenChanged	EventCallback<bool>	-
Inset (sub-trigger)	bool	false
SideOffset (sub-content)	double	0