# MenuBar A row of menus, as at the top of a desktop app: File, Edit, View. The arrow keys move between the menus, and once one is open, hovering another switches to it instantly. Each child is a `Menu` with a `label`. Below 640px each menu opens as a bottom sheet. ```tsx import { MenuBar } from "@/components/ouro/menu/menu"; ``` ## Example ```tsx Save Undo ``` ## 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`. | Prop | Type | Description | | --- | --- | --- | | `children` (required) | `ReactNode` | The menus, each `…`. | | `className` | `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. [^layout-classes]: test:registry/ouro/components/ouro/menu/menu.test.tsx::Menu dropdown > is at least 12rem wide, and className sets layout verify:testExists(registry/ouro/components/ouro/menu/menu.test.tsx::Menu dropdown > is at least 12rem wide, and className sets layout)