import { Menu, MenuItem } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 240 }}>
      <Menu aria-label="Primary">
        <MenuItem isActive>Dashboard</MenuItem>
        <MenuItem>Inbox</MenuItem>
        <MenuItem>Calendar</MenuItem>
        <MenuItem>Settings</MenuItem>
      </Menu>
    </div>
  );
}

Usage

import {
  Menu,
  MenuGroup,
  MenuItem,
  MenuDivider,
} from "@arshad-shah/cynosure-react";

<Menu aria-label="Primary">
  <MenuGroup label="Workspace">
    <MenuItem href="/dashboard" isActive>Dashboard</MenuItem>
    <MenuItem href="/inbox" badge="12">Inbox</MenuItem>
  </MenuGroup>
  <MenuDivider />
  <MenuGroup label="Account">
    <MenuItem href="/settings">Settings</MenuItem>
  </MenuGroup>
</Menu>

Menu renders a <nav> landmark. Each MenuItem is polymorphic: pass href to render an <a>, omit it for a <button>, or pass asChild to project the styling onto a router link.

Variants

With icons and badges

MenuItem accepts an icon (leading slot), iconRight (trailing slot), and badge (a small badge rendered just before the trailing icon).

Preview

Open

tsx

import { Menu, MenuItem } from '@arshad-shah/cynosure-react';

const IconDashboard = () => (
  <svg
    aria-hidden="true"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <rect x="3" y="3" width="7" height="7" />
    <rect x="14" y="3" width="7" height="7" />
    <rect x="14" y="14" width="7" height="7" />
    <rect x="3" y="14" width="7" height="7" />
  </svg>
);

const IconInbox = () => (
  <svg
    aria-hidden="true"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </svg>
);

const IconGear = () => (
  <svg
    aria-hidden="true"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="12" cy="12" r="3" />
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
  </svg>
);

export default function Example() {
  return (
    <div style={{ width: 260 }}>
      <Menu aria-label="Primary">
        <MenuItem icon={<IconDashboard />} isActive>
          Dashboard
        </MenuItem>
        <MenuItem icon={<IconInbox />} badge="12">
          Inbox
        </MenuItem>
        <MenuItem icon={<IconGear />}>Settings</MenuItem>
      </Menu>
    </div>
  );
}

Groups and dividers

Use MenuGroup to title a cluster of items and MenuDivider to break unrelated sections apart.

Preview

Open

tsx

import { Menu, MenuDivider, MenuGroup, MenuItem } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 260 }}>
      <Menu aria-label="Navigation">
        <MenuGroup label="Workspace">
          <MenuItem isActive>Dashboard</MenuItem>
          <MenuItem badge="3">Inbox</MenuItem>
          <MenuItem>Calendar</MenuItem>
        </MenuGroup>
        <MenuDivider />
        <MenuGroup label="Organisation">
          <MenuItem>Members</MenuItem>
          <MenuItem>Settings</MenuItem>
        </MenuGroup>
      </Menu>
    </div>
  );
}

Collapsible groups

Pass collapsible to MenuGroup (with optional defaultOpen) to show a caret that toggles the group’s visibility. Use open / onOpenChange for controlled mode.

Preview

Open

tsx

import { Menu, MenuGroup, MenuItem } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 260 }}>
      <Menu aria-label="Docs">
        <MenuGroup label="Components" collapsible defaultOpen>
          <MenuItem indent={1}>Button</MenuItem>
          <MenuItem indent={1}>Input</MenuItem>
          <MenuItem indent={1} isActive>
            Tabs
          </MenuItem>
        </MenuGroup>
        <MenuGroup label="Recipes" collapsible defaultOpen={false}>
          <MenuItem indent={1}>Login form</MenuItem>
          <MenuItem indent={1}>Command palette</MenuItem>
        </MenuGroup>
      </Menu>
    </div>
  );
}

Indent levels and active state

Use indent={1 | 2 | 3} to communicate hierarchy and isActive to mark the current page (sets aria-current="page" and a data flag for styling).

Preview

Open

tsx

import { Menu, MenuGroup, MenuItem } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 260 }}>
      <Menu aria-label="Docs">
        <MenuGroup label="Getting started">
          <MenuItem indent={1}>Installation</MenuItem>
          <MenuItem indent={1}>Quick start</MenuItem>
          <MenuItem indent={1} isActive>
            Theming
          </MenuItem>
        </MenuGroup>
        <MenuGroup label="Overlays">
          <MenuItem indent={1}>Dialog</MenuItem>
          <MenuItem indent={2}>Confirm dialog</MenuItem>
          <MenuItem indent={2}>Alert dialog</MenuItem>
          <MenuItem indent={1}>Popover</MenuItem>
        </MenuGroup>
      </Menu>
    </div>
  );
}

Disabled item

Pass disabled to prevent interaction. The item exposes aria-disabled="true" and skips the href redirect.

Preview

Open

tsx

import { Menu, MenuItem } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 240 }}>
      <Menu aria-label="Primary">
        <MenuItem isActive>Dashboard</MenuItem>
        <MenuItem>Inbox</MenuItem>
        <MenuItem disabled>Archived (coming soon)</MenuItem>
      </Menu>
    </div>
  );
}

API

PropTypeDefaultDescription

aria-label

string

—

Accessible label for the wrapping `<nav>` element. Required when the page contains more than one navigation region so assistive tech can disambiguate them.

Accessibility

The root renders as a <nav>; pass aria-label so the landmark is named for assistive tech.
Each non-collapsible MenuGroup carries role="group" and links to its visible label via aria-labelledby.
Collapsible groups use Cynosure’s Collapsible (Radix-backed) so the trigger automatically gets aria-expanded / aria-controls wiring.
Active items announce themselves with aria-current="page".
Disabled items set aria-disabled="true" whether they render as a <button> or an <a> (the href is suppressed when disabled).

Recipes

Pair with React Router or TanStack Router via asChild so item styling projects onto a router-aware <Link>.
Use badge for unread counts or status labels — the badge renders inside a ghost neutral Badge automatically.
Combine collapsible with defaultOpen={false} for rarely-used sections that should start hidden.
Indent step is 1rem per level — three levels of hierarchy still read comfortably without becoming a tree.