Menu | agentic-ui docs

A dropdown list of actions with full keyboard navigation. Supports separators, groups, shortcuts, and disabled items. Use the high-level wrapper for data-driven menus or compose the styled parts for full control.

Basic

import { Menu } from "@brijbyte/agentic-ui/menu";
import { Button } from "@brijbyte/agentic-ui/button";
import type { MenuEntry } from "@brijbyte/agentic-ui/menu";

import "@brijbyte/agentic-ui/menu.css";
import "@brijbyte/agentic-ui/button.css";

const ITEMS: MenuEntry[] = [
  { label: "Add to Library", onSelect: () => {} },
  { label: "Add to Playlist", onSelect: () => {} },
  { type: "separator" },
  { label: "Play Next", onSelect: () => {} },
  { label: "Play Last", onSelect: () => {} },
  { type: "separator" },
  { label: "Favorite", onSelect: () => {} },
  { label: "Share", shortcut: "⌘S", onSelect: () => {} },
];

export default function BasicDemo() {
  return (
    <Menu
      trigger={
        <Button variant="outline" size="sm">
          Song ▾
        </Button>
      }
      items={ITEMS}
    />
  );
}

Groups with shortcuts

import { Menu } from "@brijbyte/agentic-ui/menu";
import { Button } from "@brijbyte/agentic-ui/button";
import type { MenuEntry } from "@brijbyte/agentic-ui/menu";

import "@brijbyte/agentic-ui/menu.css";
import "@brijbyte/agentic-ui/button.css";

const ITEMS: MenuEntry[] = [
  {
    type: "group",
    label: "File",
    items: [
      { label: "New File", shortcut: "⌘N" },
      { label: "Open…", shortcut: "⌘O" },
      { label: "Save", shortcut: "⌘S" },
    ],
  },
  { type: "separator" },
  {
    type: "group",
    label: "Edit",
    items: [
      { label: "Undo", shortcut: "⌘Z" },
      { label: "Redo", shortcut: "⇧⌘Z" },
      { label: "Find", shortcut: "⌘F", disabled: true },
    ],
  },
];

export default function GroupsDemo() {
  return (
    <Menu
      trigger={
        <Button variant="outline" size="sm">
          Edit ▾
        </Button>
      }
      items={ITEMS}
    />
  );
}

Composed: base-ui Root + styled parts

import { Menu } from "@base-ui/react/menu";
import { MenuPositioner, MenuPopup, MenuItem, MenuSeparator } from "@brijbyte/agentic-ui/menu";
import { Button } from "@brijbyte/agentic-ui/button";

import "@brijbyte/agentic-ui/menu.css";
import "@brijbyte/agentic-ui/button.css";

export default function ComposedDemo() {
  return (
    <Menu.Root>
      <Menu.Trigger
        render={
          <Button variant="ghost" size="sm">
            Options ▾
          </Button>
        }
      />
      <Menu.Portal>
        <MenuPositioner sideOffset={4}>
          <MenuPopup>
            <MenuItem onClick={() => {}}>Profile</MenuItem>
            <MenuItem onClick={() => {}}>Settings</MenuItem>
            <MenuSeparator />
            <MenuItem onClick={() => {}}>Log out</MenuItem>
          </MenuPopup>
        </MenuPositioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

API Reference

Prop	Type	Default
trigger*	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
The button/element that opens the menu.
items*	`MenuEntry[]`	—
Array of menu entries: items, separators, and groups.
side	`"top" \| "bottom" \| "left" \| "right"`	`bottom`
Which edge of the trigger the menu appears on.
align	`"start" \| "center" \| "end"`	`start`
Alignment along the side axis.
sideOffset	`number`	`4`
Gap between the trigger and the menu popup in pixels.
open	`boolean`	—
Controlled open state.
onOpenChange	`((open: boolean) => void)`	—
Called when the menu opens or closes.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the MenuStyles object. Each key maps to a hashed CSS module class name at runtime.

arrowarrow-fillarrow-seamgroup-labelitemitem-indicatoritem-shortcutitem-textpopuppositionerseparatorsubmenu-trigger-icon