Menubar

Overview

Menubar composes the headless NaviusMenubar primitive family, which owns roving triggers and follow-focus (moving between top-level menus without a click once one is open). The styled layer adds the bordered menubar row, the floating popup panel classes, and left-aligned check/dot indicators for checkbox/radio items.

Install

navius add menubar --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsMenubar>
    <ZitsMenubarMenu Value="file">
        <ZitsMenubarTrigger>File</ZitsMenubarTrigger>
        <ZitsMenubarContent>
            <ZitsMenubarItem>New Tab <ZitsMenubarShortcut>⌘T</ZitsMenubarShortcut></ZitsMenubarItem>
            <ZitsMenubarItem Disabled>New Incognito Window</ZitsMenubarItem>
            <ZitsMenubarSeparator />
            <ZitsMenubarSub>
                <ZitsMenubarSubTrigger>Share</ZitsMenubarSubTrigger>
                <ZitsMenubarSubContent>
                    <ZitsMenubarItem>Email link</ZitsMenubarItem>
                </ZitsMenubarSubContent>
            </ZitsMenubarSub>
        </ZitsMenubarContent>
    </ZitsMenubarMenu>
</ZitsMenubar>

Parts and props

ZitsMenubar (root), ZitsMenubarMenu, ZitsMenubarGroup, and ZitsMenubarRadioGroup pass their params through to the matching NaviusMenubar* primitive unchanged. The styled parts add:

Prop	Type	Default	Description
`ZitsMenubarContent.Side`	`string`	`"bottom"`	Popup side.
`ZitsMenubarContent.Align`	`string`	`"start"`	Popup alignment.
`ZitsMenubarContent.SideOffset`	`double`	`8`	Gap from the trigger.
`ZitsMenubarContent.AlignOffset`	`double`	`-4`	Alignment offset.
`ZitsMenubarItem.Inset` / `ZitsMenubarLabel.Inset` / `ZitsMenubarSubTrigger.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)	`top` · `bottom` · `left` · `right`
`Align` (Content)	`start` · `center` · `end`

Data attribute hooks

Part	Attribute	Description
Trigger / SubTrigger	`data-popup-open`	Set while the trigger’s menu/submenu is open, emitted by the composed `NaviusMenubarTrigger`/`NaviusMenubarSubTrigger` primitives.
Item / CheckboxItem / RadioItem	`data-disabled`	Disabled-row hook, emitted by the composed primitives.
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 `NaviusMenubarPopup`/`NaviusMenubarSubContent` primitives.

Underlying primitives

NaviusMenubar