---
category: navigation
---

# Menubar

Source: `components/ui/menubar.tsx`.

`Menubar` is a compound component. Its parts are exported **flat** (`MenubarPortal`, not
`Menubar.Portal`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `MenubarPortal` | `React.ComponentProps<typeof MenubarPrimitive.Portal>` |
| `MenubarMenu` | `React.ComponentProps<typeof MenubarPrimitive.Menu>` |
| `MenubarTrigger` | `React.ComponentProps<typeof MenubarPrimitive.Trigger>` |
| `MenubarContent` | `React.ComponentProps<typeof MenubarPrimitive.Content>` |
| `MenubarGroup` | `React.ComponentProps<typeof MenubarPrimitive.Group>` |
| `MenubarSeparator` | `React.ComponentProps<typeof MenubarPrimitive.Separator>` |
| `MenubarLabel` | `React.ComponentProps<typeof MenubarPrimitive.Label> & {…}` |
| `MenubarItem` | `React.ComponentProps<typeof MenubarPrimitive.Item> & {…}` |
| `MenubarShortcut` | `React.ComponentProps<'span'>` |
| `MenubarCheckboxItem` | `React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>` |
| `MenubarRadioGroup` | `React.ComponentProps<typeof MenubarPrimitive.RadioGroup>` |
| `MenubarRadioItem` | `React.ComponentProps<typeof MenubarPrimitive.RadioItem>` |
| `MenubarSub` | `React.ComponentProps<typeof MenubarPrimitive.Sub>` |
| `MenubarSubTrigger` | `React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {…}` |
| `MenubarSubContent` | `React.ComponentProps<typeof MenubarPrimitive.SubContent>` |

All parts accept `className` and are composed as children of `Menubar`.