Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Menubar overview

Headless menubar keeps the command strip, owned menus, and keyboard handoff in the primitive layer while you keep full ownership of markup and visual styling.

Primitive imports

ts
import {
  TngMenubar,
  TngMenubarItem,
  TngMenu,
  TngMenuItem,
  TngMenuGroupLabel,
  TngMenuSeparator,
} from '@tailng-ui/primitives';

Basic composition

Compose a top-level strip with tngMenubar, then link each trigger to an owned tngMenu through [tngMenubarMenu].

Headless menubar composition

html
<div tngMenubar aria-label="Workspace commands">
  <div class="menubar-item-shell">
    <div tngMenu #workspaceCommandsFileMenu="tngMenu" aria-label="File menu">
      <div tngMenuGroupLabel>File</div>
      <button type="button" tngMenuItem tngMenuItemValue="Create document">New</button>
      <button type="button" tngMenuItem tngMenuItemValue="Open document">Open</button>
    </div>
    <button type="button" tngMenubarItem [tngMenubarMenu]="workspaceCommandsFileMenu">File</button>
  </div>
</div>

Style variants

The same primitive markup rendered through a plain CSS contract or Tailwind utility shell.

Headless menubar (plain CSS)

Workspace commands

Keep top-level actions visible while menus own the deeper command tree.

Last command: No command yet

Keyboard baseline

  • ArrowLeft/ArrowRight move across top-level items.
  • ArrowDown opens an owned menu and focuses the first enabled item.
  • Home/End jump to the first or last enabled top-level item.
  • Escape closes the current menu and restores focus to its owning trigger.