MenuBar

import { MenuBar } from "@/components/ouro/menu/menu";

Example

<MenuBar aria-label="Recipe editor">
  <Menu label="File">
    <MenuItem onClick={save} shortcut={["mod", "s"]}>Save</MenuItem>
  </Menu>
  <Menu label="Edit">
    <MenuItem onClick={undo} shortcut={["mod", "z"]}>Undo</MenuItem>
  </Menu>
</MenuBar>

Use instead when

• Use Menu with trigger instead for a single menu button, and Tabs or navigation links to move between pages.

Props

Type: MenuBarProps.

children (required)

Type: ReactNode

The menus, each <Menu label="File">…</Menu>.

className

Type: string

Layout only: margins and width. Appearance classes warn in development.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: MenuBar merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.^{layout-classes}

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.