Menubar

An application-style menu bar — a horizontal row of nana-menubar-menu top-level menus (File, Edit, View…), each opening a dropdown of nana-menu-item rows. Implements the WAI-ARIA menubar pattern: roving tabindex across the triggers, arrow-key switching between menus (with the open panel following), hover-to-switch once a menu is open, and dismissal on outside click or Escape.

Preview

New

Open

Undo

Redo

<nana-menubar bordered>
<nana-menubar-menu label="File">
  <nana-menu-item value="new" shortcut="⌘N">New</nana-menu-item>
  <nana-menu-item value="open" shortcut="⌘O">Open</nana-menu-item>
  <nana-menu-item value="close" destructive shortcut="⌘W">Close</nana-menu-item>
</nana-menubar-menu>
<nana-menubar-menu label="Edit">
  <nana-menu-item value="undo" shortcut="⌘Z">Undo</nana-menu-item>
  <nana-menu-item value="redo" shortcut="⇧⌘Z">Redo</nana-menu-item>
</nana-menubar-menu>
</nana-menubar>

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/menubar";

Basic usage

<nana-menubar bordered>
  <nana-menubar-menu label="File">
    <nana-menu-item value="new" shortcut="⌘N">New</nana-menu-item>
    <nana-menu-item value="open" shortcut="⌘O">Open</nana-menu-item>
  </nana-menubar-menu>
</nana-menubar>

API

Property	Type	Default	Description
`bordered`	`boolean`	`false`	Bordered shell — a self-contained app menu bar

Events

Event	Type	Description
`nana-select`	`CustomEvent`	Bubbled from a chosen item (`detail.value`)

Slots

Slot	Description
`(default)`	`nana-menubar-menu` children

CSS Variables

Variable	Default	Description
`--nana-menubar-bg`	—	Bar background
`--nana-menubar-gap`	—	Gap between top-level menus

CSS Parts

Part	Description
`bar`	The horizontal bar container

Accessibility

Storybook

Explore Menubar interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook