bx

Menubar

A visually persistent menu common in desktop applications.

tsx 
<Menubar>
  <MenubarMenu>
    <MenubarTrigger for="file">File</MenubarTrigger>
    <MenubarContent id="file">
      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Menubar — barre de menu horizontale style desktop app (File / Edit / View / …). Chaque MenubarMenu ouvre son popover au clic ou au hover.

Composition identique à DropdownMenu (Items, Label, Separator, Shortcut, Sub) mais présentée en rang horizontal en tête de page/app.

Installation

Terminal 
$ bext ui add menubar

Usage

tsx 
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarShortcut, MenubarSeparator } from "@bext-stack/ui/primitives"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger for="file">File</MenubarTrigger>
    <MenubarContent id="file">
      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Anatomy

<Menubar>
  ├── <MenubarMenu>
  │   ├── <MenubarTrigger for="file-menu">File</MenubarTrigger>
  │   └── <MenubarContent id="file-menu">
  │       ├── <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
  │       └── <MenubarItem>Print... <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
  └── <MenubarMenu>...</MenubarMenu>

API Reference

Menubar

Prop Type Default Description
className string — Bar h-9 rounded-md border bg-background p-1 shadow-xs, flex items-center gap-1.

MenubarMenu

Prop Type Default Description
children ReactNode — Wrapper relative pour trigger + content.

MenubarTrigger

Prop Type Default Description
for string — Match l'id du Content.

MenubarContent

Prop Type Default Description
id string — Match Trigger.for.
align "start" | "end" | "center" "start" Alignement horizontal du panel.

MenubarItem

Prop Type Default Description
href string — Rend si présent.
inset boolean — pl-8 pour aligner avec des items checkbox/radio.
variant "default" | "destructive" "default" Destructive → text-destructive.

MenubarCheckboxItem / RadioItem

Prop Type Default Description
checked boolean — Coche / point radio visible si true.

MenubarSub / SubTrigger / SubContent

Prop Type Default Description
— — — Sub-menu hover-reveal.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
data-ui="toggle-pop" Trigger data-target="#id" Cliquer ouvre.
data-overlay data-light Content hidden Popover léger.

Keyboard

Key Action
Enter / Space Sur trigger : ouvre. Sur item : active + ferme.
Escape Ferme.

Accessibility

Menubar porte role="menubar" ; chaque MenubarMenu ne wrappe que un trigger+content.

Pour un vrai menubar app clavier-first (nav flèches entre menus), ajouter un island custom qui capture ArrowLeft/ArrowRight.

Try it live
Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser
Pure PRISM + real bext signals — fine-grained, no re-render.
← Label Navigation Menu →