Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Menubar overview

Menubar composes top-level command items and owned menus with keyboard-first navigation, focus transfer, and submenu support.

Imports

Use primitives for full markup ownership, or wrappers for faster composition.

Primitive imports

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

Wrapper imports

ts
import { TngMenubarComponent, TngMenuComponent } from '@tailng-ui/components';
import { TngMenubarItem, TngMenuItem } from '@tailng-ui/primitives';

Usage patterns

Primitive usage

html
<div tngMenubar aria-label="Workspace commands">
  <div tngMenu #fileMenu="tngMenu">
    <button type="button" tngMenuItem tngMenuItemValue="New file">New</button>
  </div>
  <button type="button" tngMenubarItem [tngMenubarMenu]="fileMenu">File</button>
</div>

Wrapper usage

html
<tng-menubar ariaLabel="Workspace commands">
  <tng-menu #fileMenu="tngMenu" ariaLabel="File menu">
    <button type="button" tngMenuItem tngMenuItemValue="New file">New</button>
  </tng-menu>
  <button type="button" tngMenubarItem [tngMenubarMenu]="fileMenu">File</button>
</tng-menubar>

Style variants

Same menubar behavior rendered through plain CSS wrappers and Tailwind utility shells.

Wrapper menubar (plain CSS)

last command: No command yet

Keyboard baseline

  • ArrowLeft/ArrowRight move focus across top-level items.
  • ArrowDown opens owned menus and enters menu item traversal.
  • Escape closes menus and restores focus to their owning menubar item.