Components / Menubar

Menubar

App-style horizontal menubar with dropdown submenus. Implements the W3C WAI-ARIA Authoring Practices menubar pattern: roving tabindex (Tab exits the bar), Arrow keys navigate top/sub levels, Right/Left cross between submenus, Enter/Space/ArrowDown opens, Escape closes, Home/End jump to first/last, and typeahead jumps to items by first character. Submenu visuals shared with cg-dropdown / cg-split-button via the menu-list styling primitive.

navigation v0.8.0

Playground

Examples

App menubar (File / Edit / View / Help)

<cg-menubar style="max-width:480px;"></cg-menubar>

Try the keyboard

Keyboard recipe (per W3C APG)

Click a top item then try: Tab exits · Arrow Left/Right moves between menus · Arrow Down / Enter / Space opens · Escape closes · Home / End jump to first/last · type a letter (F / E / V / H) to jump by name.

<cg-stack direction="column" gap="md">
  <cg-card padding="md">
    <cg-stack direction="column" gap="sm">
      <cg-text size="sm" weight="semibold">Keyboard recipe (per W3C APG)</cg-text>
      <cg-text size="xs" muted>Click a top item then try: <strong>Tab</strong> exits · <strong>Arrow Left/Right</strong> moves between menus · <strong>Arrow Down / Enter / Space</strong> opens · <strong>Escape</strong> closes · <strong>Home / End</strong> jump to first/last · type a letter (<strong>F / E / V / H</strong>) to jump by name.</cg-text>
    </cg-stack>
  </cg-card>
  <cg-menubar id="kb-demo" style="max-width:480px;"></cg-menubar>
</cg-stack>

Rounded variants — straight to fully rounded

rounded="none" — straight corners

rounded="sm"

rounded="md" (default)

rounded="lg"

rounded="full" — pill bar with pill triggers

<cg-stack direction="column" gap="md">
  <cg-text size="xs" muted>rounded="none" — straight corners</cg-text>
  <cg-menubar data-vh="rounded-none" rounded="none" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>rounded="sm"</cg-text>
  <cg-menubar data-vh="rounded-sm" rounded="sm" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>rounded="md" (default)</cg-text>
  <cg-menubar data-vh="rounded-md" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>rounded="lg"</cg-text>
  <cg-menubar data-vh="rounded-lg" rounded="lg" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>rounded="full" — pill bar with pill triggers</cg-text>
  <cg-menubar data-vh="rounded-full" rounded="full" style="max-width:340px;"></cg-menubar>
</cg-stack>

Size variants — sm / md / lg

size="sm" — compact (xs font, tight padding)

size="md" (default) — sm font, standard padding

size="lg" — base font, roomy padding

<cg-stack direction="column" gap="md">
  <cg-text size="xs" muted>size="sm" — compact (xs font, tight padding)</cg-text>
  <cg-menubar data-vh="size-sm" size="sm" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>size="md" (default) — sm font, standard padding</cg-text>
  <cg-menubar data-vh="size-md" style="max-width:340px;"></cg-menubar>
  <cg-text size="xs" muted>size="lg" — base font, roomy padding</cg-text>
  <cg-menubar data-vh="size-lg" size="lg" style="max-width:380px;"></cg-menubar>
</cg-stack>

Indicator: underline (modern) vs none (canonical)

Modern web menubar — magnetic underline

Click between menus to watch the indicator slide. Used by Notion, Vercel, Linear.

Canonical app menubar — background-only

The macOS / VSCode / Figma look. Only the open trigger's background highlights — no extra indicator.

<cg-stack direction="column" gap="md">
  <cg-card padding="md">
    <cg-stack direction="column" gap="sm">
      <cg-text size="sm" weight="semibold">Modern web menubar — magnetic underline</cg-text>
      <cg-text size="xs" muted>Click between menus to watch the indicator slide. Used by Notion, Vercel, Linear.</cg-text>
      <cg-menubar data-vh="ind-underline" indicator="underline" style="max-width:340px;"></cg-menubar>
    </cg-stack>
  </cg-card>
  <cg-card padding="md">
    <cg-stack direction="column" gap="sm">
      <cg-text size="sm" weight="semibold">Canonical app menubar — background-only</cg-text>
      <cg-text size="xs" muted>The macOS / VSCode / Figma look. Only the open trigger's background highlights — no extra indicator.</cg-text>
      <cg-menubar data-vh="ind-none" indicator="none" style="max-width:340px;"></cg-menubar>
    </cg-stack>
  </cg-card>
</cg-stack>

Import

import { CgMenubar } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-menubar';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`items`	MenubarItem[]	—	Top-level menus, each with `label`, optional `id`, and a `children` array of `MenubarChildItem` (label, shortcut?, id?, disabled?, danger?, separator?)
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	Border radius — straight (none), small/medium/large, or fully rounded (pill). When "full", triggers also become pills so corners don't clash.
`size`	"sm" \| "md" \| "lg"	"md"	Compact / default / roomy sizing — drives bar padding, gap, and trigger font/padding.
`indicator`	"underline" \| "none"	"underline"	Active-menu indicator style. "underline" — magnetic 2px bar slides between open menus (modern web feel, à la Notion / Vercel / Linear). "none" — rely only on the open trigger background (canonical macOS / VSCode / Figma app-menubar look).

Events

Event	Detail	Description
`cg-menubar-select`	{ menu: string, item: string }	A submenu item was selected. Both fields fall back to the label when no id is set.