agentic-ui

Menu

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>
  );
}