Menu

import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "@nyte-ai/ui/menu";

A list of actions that opens from a button. Every row reserves a leading icon column and a trailing meta column, even when empty. The list opens below its trigger. For a control whose label shows the current choice, use Select, which opens over its trigger.

Usage

• MenuItem and MenuRadioItem close on click. MenuCheckboxItem and MenuSwitchItem stay open. closeOnClick changes either.
• For a searchable palette under a scrim, use Command.

Anatomy

<Menu>
  <MenuTrigger />
  <MenuContent>
    <MenuGroup>
      <MenuGroupLabel />
      <MenuItem />
      <MenuLinkItem />
      <MenuCheckboxItem />
      <MenuSwitchItem />
    </MenuGroup>
    <MenuSeparator />
    <MenuRadioGroup>
      <MenuRadioItem value="choice" />
    </MenuRadioGroup>
    <MenuSub>
      <MenuSubTrigger />
      <MenuSubContent>
        <MenuItem />
      </MenuSubContent>
    </MenuSub>
  </MenuContent>
</Menu>

Examples

import { Button } from "@nyte-ai/ui/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuSwitchItem,
  MenuTrigger,
} from "@nyte-ai/ui/menu";
import { useState } from "react";

function SessionMenu() {
  const [effort, setEffort] = useState("medium");
  const [pinned, setPinned] = useState(false);

  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline">Session</Button>} />
      <MenuContent>
        <MenuGroup>
          <MenuGroupLabel>Session</MenuGroupLabel>
          <MenuItem icon="pencil" meta="⌘R" onClick={() => {}}>
            Rename
          </MenuItem>
          <MenuItem icon="copy" onClick={() => {}}>
            Duplicate
          </MenuItem>
          <MenuItem icon="archive" disabled>
            Archive
          </MenuItem>
          <MenuSwitchItem icon="pin" checked={pinned} onCheckedChange={setPinned}>
            Pinned
          </MenuSwitchItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuSub>
          <MenuSubTrigger icon="bolt" value={effort}>
            Effort
          </MenuSubTrigger>
          <MenuSubContent>
            <MenuRadioGroup value={effort} onValueChange={setEffort}>
              <MenuRadioItem value="low">low</MenuRadioItem>
              <MenuRadioItem value="medium">medium</MenuRadioItem>
              <MenuRadioItem value="high">high</MenuRadioItem>
            </MenuRadioGroup>
          </MenuSubContent>
        </MenuSub>
        <MenuSeparator />
        <MenuItem icon="trash" variant="danger" onClick={() => {}}>
          Delete
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}

Props

Every styled part takes xstyle, className, and style. See Theming. Menu, MenuTrigger, MenuGroup, MenuRadioGroup, and MenuSub are Base UI's.

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

Menu

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

Root Props:

MenuTrigger

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

Trigger Props:

Trigger Data Attributes:

MenuContent

Renders the portal, positioner, and popup. Positioning props go to the positioner and the rest, including ref, to the popup.

The popup scrolls when it runs out of room.

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:

MenuSubContent

Takes the same props as MenuContent except matchAnchorWidth. side, align, and collisionAvoidance have no defaults of their own. Base UI opens a submenu at inline-end, aligned to start.

MenuItem

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

Item Props:

Item Data Attributes:

MenuLinkItem

Renders a link. Takes the props in the MenuItem table except variant.

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:

MenuCheckboxItem

Takes the props in the MenuItem table except variant. A checkmark follows meta while checked.

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

CheckboxItem Props:

CheckboxItem Data Attributes:

MenuSwitchItem

A MenuCheckboxItem that draws a switch in place of meta and the checkmark. It takes no meta.

MenuRadioGroup

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

RadioGroup Props:

MenuRadioItem

Takes the props in the MenuItem table except variant. A checkmark follows meta on the chosen row.

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

RadioItem Props:

RadioItem Data Attributes:

MenuGroup

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

Group Props:

MenuGroupLabel

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

GroupLabel Props:

MenuSeparator

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

Separator Props:

MenuSub

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

SubmenuRoot Props:

MenuSubTrigger

Takes icon, leading, and layout as MenuItem does.

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

SubmenuTrigger Props:

SubmenuTrigger Data Attributes:

Accessibility

• The popup has role="menu". Give it aria-label when the trigger's text does not name it.
• Items are menuitem, radio items are menuitemradio, and checkbox and switch items are menuitemcheckbox with aria-checked.
• Arrow Down and Up move focus and wrap. Home and End jump. Typing matches item text, or label when set. Enter and Space activate. Escape closes and returns focus to the trigger.
• Arrow Right opens a submenu. Arrow Left closes it.
• Disabled items stay reachable with the arrow keys and do not activate.
• Icons, switches, and checkmarks are hidden from assistive technology, so the label must say what the row does.