Dropdown Menu

Overview

DropdownMenu composes the headless NaviusMenu primitive family, which owns keyboard navigation, portalling, and positioning against the trigger. The styled layer adds the floating panel classes, left-aligned check/dot indicators for checkbox/radio items, and inset padding for items that need to align under checkbox/radio rows.

Discrepancy: the registry item is named dropdown-menu, but every component class is ZitsMenu* (ZitsMenu, ZitsMenuTrigger, ZitsMenuContent, …), not ZitsDropdownMenu*; the corresponding docs site page is titled “Menu” at /docs/components/menu. This manifest follows the registry name (dropdown-menu, per registry/registry.json) since that is what navius add expects, while using the actual ZitsMenu* class names in Usage.

Install

navius add dropdown-menu --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<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>
    </ZitsMenuContent>
</ZitsMenu>

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

Parts and props

ZitsMenu (root), ZitsMenuTrigger, ZitsMenuGroup, ZitsMenuPortal, ZitsMenuRadioGroup, and ZitsMenuSub pass their params through to the matching NaviusMenu* primitive unchanged. The styled parts add:

Prop	Type	Default	Description
`ZitsMenuContent.Side`	`string`	`"bottom"`	Popup side.
`ZitsMenuContent.Align`	`string`	`"center"`	Popup alignment.
`ZitsMenuContent.SideOffset`	`double`	`4`	Gap from the trigger.
`ZitsMenuContent.AlignOffset`	`double`	`0`	Alignment offset.
`ZitsMenuItem.Inset` / `ZitsMenuLabel.Inset` / `ZitsMenuSubTrigger.Inset`	`bool`	`false`	Adds `pl-8` to align the row with checkbox/radio item indicators.

Styling surface

Attributes on every part is merged with that part’s preset class set via Cn.Merge, caller classes applied last.

Parameter	Values
`Side` (Content, SubContent)	`top` · `bottom` · `left` · `right`
`Align` (Content)	`start` · `center` · `end`

Data attribute hooks

Part	Attribute	Description
Item / CheckboxItem / RadioItem / SubTrigger	`data-highlighted`	Highlighted-row hook, emitted by the composed `NaviusMenu*Item` primitives.
Item / CheckboxItem / RadioItem	`data-disabled`	Disabled-row hook, emitted by the composed primitives.
SubTrigger	`data-popup-open`	Set while the submenu it opens is open, emitted by the composed `NaviusMenuSubTrigger` primitive.
Popup / SubContent	`data-open`, `data-closed`, `data-side`	Open-state and placement hooks driving the enter/exit and slide-in Tailwind animation classes, emitted by the composed `NaviusMenuPopup`/`NaviusMenuSubContent` primitives.

Underlying primitives

NaviusMenu