Skip to content
Navigation

Menubar

A horizontal menu bar with dropdown menus, modeled after desktop application menus. Supports keyboard navigation and grouped items.

Sourcesrc/components/ui/menubar.tsx

File / Edit / View Menubar

Import

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@mikenotthepope/substrateui"

Composition

Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem
        └── MenubarSeparator

Direction

The bar is a flex row, so the menus reverse with the line and the first one sits on the right in RTL. Submenu indicators are ChevronRight glyphs and mirror with the direction, since a submenu opens toward the end of the line — the RTL icon audit classifies them flip in RTL.

Arrow keys follow the visual order rather than the source order, so Left moves to the next menu in RTL. That comes from Base UI and needs nothing from you.

API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the menubar container.