Menu

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@nyte-ai/ui";
import { Menu } from "@nyte-ai/ui/menu";

A list of actions opened by a button, with keyboard navigation and submenus. The root export ships styled DropdownMenu* components. The @nyte-ai/ui/menu subpath gives you the same behavior unstyled when you need parts the styled set does not cover, such as checkbox items, links, or an arrow.

Usage

• Items are actions. To choose one of several values use a DropdownMenuRadioGroup. For a form-style control use Select.
• Put variant="destructive" on the last item, after a separator.
• inset adds leading padding to an item or label, so its text lines up with rows that start with an icon.
• DropdownMenuShortcut is display only. It does not bind the key.
• closeOnClick controls whether clicking an item closes the menu. It defaults to true on Menu.Item and false on Menu.CheckboxItem.
• Menu.LinkItem renders an <a>, so pass href instead of onClick.
• openOnHover on Menu.Trigger opens the menu on hover after delay milliseconds. Submenu triggers open on hover already.
• A trigger rendered outside Menu.Root connects to it through a handle from Menu.createHandle(), passed to the handle prop on both. Submenu triggers stay inside their Menu.SubmenuRoot.

Anatomy

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    {/* Portal › Positioner › Popup */}
    <DropdownMenuLabel />
    <DropdownMenuItem>
      <DropdownMenuShortcut />
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup>
      <DropdownMenuRadioItem /> {/* includes the indicator */}
    </DropdownMenuRadioGroup>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger /> {/* includes the chevron */}
      <DropdownMenuSubContent /> {/* Content with side="right" */}
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

<Menu.Root>
  <Menu.Trigger />
  <Menu.Portal>
    <Menu.Backdrop />
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Arrow />
        <Menu.Item />
        <Menu.LinkItem />
        <Menu.Separator />

        <Menu.SubmenuRoot>
          <Menu.SubmenuTrigger />
          {/* Portal › Positioner › Popup, as above */}
        </Menu.SubmenuRoot>

        <Menu.Group>
          <Menu.GroupLabel />
        </Menu.Group>

        <Menu.RadioGroup>
          <Menu.RadioItem>
            <Menu.RadioItemIndicator />
          </Menu.RadioItem>
        </Menu.RadioGroup>

        <Menu.CheckboxItem>
          <Menu.CheckboxItemIndicator />
        </Menu.CheckboxItem>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

Examples

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Session</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      Rename
      <DropdownMenuShortcut>⌘R</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup value={effort} onValueChange={setEffort}>
      <DropdownMenuLabel inset>Effort</DropdownMenuLabel>
      <DropdownMenuRadioItem value="low">Low</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="medium">Medium</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="high">High</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Inbox</DropdownMenuItem>
        <DropdownMenuItem>Archive</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Open a dialog from an item by controlling the dialog and setting its state in onClick.

<DropdownMenuItem onClick={() => setRenameOpen(true)}>Rename</DropdownMenuItem>

Props

Each styled component wraps a Base UI part.

DropdownMenuContent forwards these to the positioner and passes the rest to the popup.

DropdownMenuSubContent takes the same props with defaults side="right", align="start", sideOffset={0}, alignOffset={-3}.

DropdownMenuItem, DropdownMenuRadioItem, DropdownMenuSubTrigger, and DropdownMenuLabel add inset. DropdownMenuItem also adds variant.

Every styled export accepts xstyle alongside className and style. See Theming.

The part tables below come from Base UI, MIT, © Material-UI SAS.

Root

Groups all parts of the menu. Doesn't render its own HTML element.

Root Props:

Trigger

A button that opens the menu. Renders a <button> element.

Trigger Props:

Trigger Data Attributes:

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Portal Props:

Backdrop

An overlay displayed beneath the menu popup. Renders a <div> element.

Backdrop Props:

Backdrop Data Attributes:

Positioner

Positions the menu popup against the trigger. Renders a <div> element.

Positioner Props:

alignOffset Prop Example:

<Positioner
  alignOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;
  }}
/>

sideOffset Prop Example:

<Positioner
  sideOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;
  }}
/>

collisionAvoidance Prop Example:

<Positioner
  collisionAvoidance={{
    side: 'shift',
    align: 'shift',
    fallbackAxisSide: 'none',
  }}
/>

Positioner Data Attributes:

Positioner CSS Variables:

Popup

A container for the menu items. Renders a <div> element.

Popup Props:

Popup Data Attributes:

Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

Arrow Props:

Arrow Data Attributes:

Viewport

A viewport for displaying content transitions. This component is only required if one popup can be opened by multiple triggers, its content changes based on the trigger, and switching between them is animated. Renders a <div> element.

Viewport Props:

Viewport Data Attributes:

Viewport CSS Variables:

Item

An individual interactive item in the menu. Renders a <div> element.

Item Props:

Item Data Attributes:

LinkItem

A link in the menu that can be used to navigate to a different page or section. Renders an <a> element.

LinkItem Props:

LinkItem Data Attributes:

Separator

A separator element accessible to screen readers. Renders a <div> element.

Separator Props:

Group

Groups related menu items with the corresponding label. Renders a <div> element.

Group Props:

GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

GroupLabel Props:

RadioGroup

Groups related radio items. Renders a <div> element.

RadioGroup Props:

RadioItem

A menu item that works like a radio button in a given group. Renders a <div> element.

RadioItem Props:

RadioItem Data Attributes:

RadioItemIndicator

Indicates whether the radio item is selected. Renders a <span> element.

RadioItemIndicator Props:

RadioItemIndicator Data Attributes:

CheckboxItem

A menu item that toggles a setting on or off. Renders a <div> element.

CheckboxItem Props:

CheckboxItem Data Attributes:

CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

CheckboxItemIndicator Props:

CheckboxItemIndicator Data Attributes:

SubmenuRoot

Groups all parts of a submenu. Doesn't render its own HTML element.

SubmenuRoot Props:

SubmenuTrigger

A menu item that opens a submenu. Renders a <div> element.

SubmenuTrigger Props:

SubmenuTrigger Data Attributes:

Accessibility

• The popup has role="menu", items role="menuitem", radio items role="menuitemradio" with aria-checked, submenu triggers aria-haspopup="menu" and aria-expanded.
• Arrow Down and Up move the highlight and wrap, Home and End jump, typing matches item text (override with label), Enter and Space activate, Escape closes and returns focus to the trigger.
• orientation on the root switches arrow navigation to left and right. loopFocus={false} stops the highlight wrapping at the ends.
• Arrow Right opens a submenu and moves focus into it, Arrow Left closes it. Submenus also open on hover.
• Disabled items are aria-disabled. They stay reachable with the arrow keys and do not activate.
• Separators are role="separator".