Menubar

Menubars provide persistent top-level menus (File, Edit, View) with keyboard traversal across items.

Try it

Open File, then hover Share to open its submenu without moving keyboard focus.

Usage

Use RuiMenubarMenu for each top-level menu. Set label to name the menubar landmark.

import {
  RuiMenubar,
  RuiMenubarMenu,
  RuiMenubarMenuItem,
  RuiMenubarSubmenuContent,
} from '@ecopages/radiant-ui/menubar';
import { RuiSeparator } from '@ecopages/radiant-ui/separator';
 
<RuiMenubar label="Application menu">
  <RuiMenubarMenu label="File">
    <RuiMenubarMenuItem value="new">New</RuiMenubarMenuItem>
    <RuiSeparator />
    <RuiMenubarMenuItem value="share" hasSubmenu>Share</RuiMenubarMenuItem>
    <RuiMenubarSubmenuContent>
      <RuiMenubarMenuItem value="email">Email</RuiMenubarMenuItem>
    </RuiMenubarSubmenuContent>
  </RuiMenubarMenu>
</RuiMenubar>Copy

Place RuiMenubarSubmenuContent as the next sibling of the branch item. That sibling pair is the ARIA and positioning contract.

Custom markup

import '@ecopages/radiant-ui/menubar';
 
<rui-menubar label="Application menu">
  <div data-ref="root" role="menubar">
    <div data-ref="menubar-root">
      <button role="menuitem" aria-haspopup="true">File</button>
      <div role="menu" hidden>
        <button role="menuitem" data-value="new">New</button>
      </div>
    </div>
  </div>
</rui-menubar>Copy

Data-driven menus

The items prop supports recursively nested items. A top-level item with children becomes a menu trigger; a top-level item without children remains a direct menubar item. Within a popup, use { type: 'separator' } in a RuiMenuEntry[] to divide action groups.

import { RuiMenubar, type RuiMenubarItem } from '@ecopages/radiant-ui/menubar';
 
const applicationMenus: RuiMenubarItem[] = [
  {
    id: 'file',
    label: 'File',
    items: [
      { value: 'new', label: 'New' },
      { type: 'separator', id: 'sharing-actions' },
      {
        value: 'share',
        label: 'Share',
        items: [{ value: 'email', label: 'Email' }],
      },
    ],
  },
];
 
<RuiMenubar label="Application menu" items={applicationMenus} />Copy

Interaction model

The menubar keeps pointer state and keyboard focus separate. Pointer interaction opens a menu surface without moving focus into it. Keyboard interaction opens the same surface and moves focus to its first enabled item. This lets a user move the pointer through nested flyouts without an unexpected focus change.

When a branch opens from pointer hover, focus may remain on a previous item such as New. This is intentional: hover and focus convey different input modalities. Style :hover and [aria-expanded="true"] independently from :focus-visible so the open branch is clear without implying it has keyboard focus.

Desktop application patterns

Menubars suit desktop-style apps. For site navigation, prefer RuiNavigationMenu or RuiSidebar.

Theming

Menubar surfaces map to semantic surface roles, never Tailwind palette steps:

Geometry shares control tokens (--size-control-*, --space-control-*, --radius-control) with RuiButton. Override --rui-menu-item-hover on the host or an ancestor to restyle hover; map other roles at the theme layer, not in component CSS.

API

RuiMenubar is a custom element (<rui-menubar>) rendering a role="menubar" landmark. The JSX helper renders items as top-level items with optional popups. For explicit markup, compose the exported menu helpers rather than hand-authoring data-ref structure.

Attributes

Light-DOM contract

Branch pattern: [role="menuitem"] with aria-haspopup followed by sibling [role="menu"].

Events

View helpers

CSS classes

Public BEM classes on the composed light-DOM surface (documented via @cssclass):

Theme roles

Accessibility

• Menubar renders with role="menubar" and supports horizontal arrow-key traversal between top-level items.
• Popup menus use vertical arrow-key navigation; Home and End move to the first and last enabled item.
• Branches expose aria-haspopup="menu", aria-expanded, and generated aria-controls linkage.
• Separators are non-focusable and are skipped by arrow-key navigation.
• Menus dismiss with Escape, Tab, outside pointer interaction, or leaf activation.
• Provide label so the region is announced to screen reader users.

Follows the WAI-ARIA Menubar pattern.