# Menubar (/docs/menubar)





## API Reference [#api-reference]

<BaseUIReference href="https://base-ui.com/react/components/menubar" />

## Basic [#basic]

<Preview cssProperties="menubarPlaygroundCssProperties">
  <MenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
            MenubarSubmenu,
            MenubarSubmenuTrigger,
            MenubarSubmenuTriggerIcon,
            MenubarSubmenuContent,
            MenubarSeparator,
          } from "moduix";

          export function MenubarDemo() {
            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>File</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>New File</MenubarItem>
                    <MenubarItem closeOnClick>Open...</MenubarItem>
                    <MenubarItem closeOnClick>Save</MenubarItem>
                    <MenubarSubmenu>
                      <MenubarSubmenuTrigger>
                        Export
                        <MenubarSubmenuTriggerIcon />
                      </MenubarSubmenuTrigger>
                      <MenubarSubmenuContent>
                        <MenubarItem closeOnClick>PDF</MenubarItem>
                        <MenubarItem closeOnClick>PNG</MenubarItem>
                        <MenubarItem closeOnClick>SVG</MenubarItem>
                      </MenubarSubmenuContent>
                    </MenubarSubmenu>
                    <MenubarSeparator />
                    <MenubarItem closeOnClick>Print</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>

                <MenubarMenu>
                  <MenubarTrigger>Edit</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>Cut</MenubarItem>
                    <MenubarItem closeOnClick>Copy</MenubarItem>
                    <MenubarItem closeOnClick>Paste</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>

                <MenubarMenu disabled>
                  <MenubarTrigger>Help</MenubarTrigger>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSSProperties>
    {(context) => <MenubarCssPropertiesPanel {...context} />}
  </Preview.CSSProperties>

  <Preview.CSSPlayground>
    {(context) => <MenubarCssPlaygroundPanel {...context} />}
  </Preview.CSSPlayground>
</Preview>

## Anatomy [#anatomy]

`Menubar` is built from top-level menus. Each `MenubarMenu` pairs one `MenubarTrigger`
with one `MenubarContent`; keep this pair together so keyboard navigation and open state
stay predictable. `MenubarContent` renders service slots internally, so day-to-day usage
only needs the visible command parts.

```text
Menubar
└─ MenubarMenu
   ├─ MenubarTrigger
   └─ MenubarContent
      ├─ MenubarArrow
      ├─ MenubarItem / MenubarCheckboxItem / MenubarRadioItem
      ├─ MenubarGroup
      ├─ MenubarSeparator
      └─ MenubarSubmenu
         ├─ MenubarSubmenuTrigger
         └─ MenubarSubmenuContent
```

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem closeOnClick>New</MenubarItem>
      <MenubarSubmenu>
        <MenubarSubmenuTrigger>
          Export
          <MenubarSubmenuTriggerIcon />
        </MenubarSubmenuTrigger>
        <MenubarSubmenuContent>
          <MenubarItem closeOnClick>PDF</MenubarItem>
        </MenubarSubmenuContent>
      </MenubarSubmenu>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

| Part                                       | Role                                                                                                         |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| `Menubar`                                  | Root state machine for orientation, roving focus, and top-level menu behavior.                               |
| `MenubarMenu`                              | One top-level menu scope that links a trigger and its popup content.                                         |
| `MenubarTrigger`                           | Interactive control in the menubar row that opens the matching menu.                                         |
| `MenubarContent`                           | Popup container for menu items and submenus. Accepts popup props, placement props, and service-slot options. |
| `MenubarArrow`                             | Optional visual arrow that points from popup to trigger.                                                     |
| `MenubarItem` / `MenubarLinkItem`          | Action and navigation rows.                                                                                  |
| `MenubarCheckboxItem` / `MenubarRadioItem` | Stateful command rows with indicator slots.                                                                  |
| `MenubarItemText*` / `MenubarItemShortcut` | Optional layout helpers for icons, labels, and shortcut text inside rows.                                    |
| `MenubarSeparator` / `MenubarGroup*`       | Visual grouping parts for related commands.                                                                  |
| `MenubarSubmenu`                           | Nested command group rendered from a submenu trigger and submenu content.                                    |

In most cases, keep default portal and positioning behavior and style visible parts first:
`Menubar`, `MenubarTrigger`, `MenubarContent`, and item rows. Use `classNames` plus
`slotProps` only when you need to customize service layers (`portal`, `backdrop`, `positioner`,
or `viewport`) beyond classes.

## Composition [#composition]

`Menubar` owns the root menubar behavior. Each `MenubarMenu` owns a top-level menu and
uses `MenubarTrigger` plus `MenubarContent` for the popup.

`className` styles the visible popup. `classNames` styles internal service slots hidden from
the default composition. `MenubarContent` forwards Base UI popup props and accepts positioner
props such as `side`, `sideOffset`, `align`, `alignOffset`, `arrowPadding`, `anchor`,
`collisionAvoidance`, `collisionBoundary`, `collisionPadding`, `sticky`, `positionMethod`,
and `disableAnchorTracking` directly. Arrow is disabled by default; set `arrow` to render
the default arrow, or pass a custom node to `arrow` for full control. Use `container`
and `withBackdrop` for common service-slot behavior, and use `slotProps` for lower-level Base UI
portal, backdrop, positioner, arrow, or viewport props:

```tsx
<MenubarContent
  className={styles.popup}
  classNames={{
    portal: styles.portal,
    backdrop: styles.backdrop,
    positioner: styles.positioner,
    arrow: styles.arrow,
    viewport: styles.viewport,
  }}
  slotProps={{
    arrow: {
      offset: 4,
    },
    positioner: {
      collisionPadding: 8,
    },
  }}
  withBackdrop
/>
```

## Examples [#examples]

### Groups And Controls [#groups-and-controls]

Use groups, radio items, and checkbox items when menubar commands update application state.

<Preview>
  <GroupsAndControlsMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarGroup,
            MenubarGroupLabel,
            MenubarRadioGroup,
            MenubarRadioItem,
            MenubarRadioItemIndicator,
            MenubarItemText,
            MenubarSeparator,
            MenubarCheckboxItem,
            MenubarCheckboxItemIndicator,
          } from "moduix";
          import { useState } from "react";

          export function GroupsAndControlsMenubarDemo() {
            const [sortBy, setSortBy] = useState("name");
            const [showSidebar, setShowSidebar] = useState(true);
            const [showPanel, setShowPanel] = useState(false);

            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>View</MenubarTrigger>
                  <MenubarContent>
                    <MenubarGroup>
                      <MenubarGroupLabel>Sort</MenubarGroupLabel>
                      <MenubarRadioGroup value={sortBy} onValueChange={setSortBy}>
                        <MenubarRadioItem value="name">
                          <MenubarRadioItemIndicator />
                          <MenubarItemText>Name</MenubarItemText>
                        </MenubarRadioItem>
                        <MenubarRadioItem value="date">
                          <MenubarRadioItemIndicator />
                          <MenubarItemText>Date Modified</MenubarItemText>
                        </MenubarRadioItem>
                        <MenubarRadioItem value="type">
                          <MenubarRadioItemIndicator />
                          <MenubarItemText>Type</MenubarItemText>
                        </MenubarRadioItem>
                      </MenubarRadioGroup>
                    </MenubarGroup>

                    <MenubarSeparator />

                    <MenubarGroup>
                      <MenubarGroupLabel>Panels</MenubarGroupLabel>
                      <MenubarCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
                        <MenubarCheckboxItemIndicator />
                        <MenubarItemText>Sidebar</MenubarItemText>
                      </MenubarCheckboxItem>
                      <MenubarCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
                        <MenubarCheckboxItemIndicator />
                        <MenubarItemText>Preview</MenubarItemText>
                      </MenubarCheckboxItem>
                    </MenubarGroup>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Shortcuts [#shortcuts]

Use `MenubarItemShortcut` for keyboard shortcut text that aligns to the end of each item.

<Preview>
  <ShortcutsMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
            MenubarItemShortcut,
            MenubarSeparator,
          } from "moduix";

          export function ShortcutsMenubarDemo() {
            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>Edit</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>
                      Undo
                      <MenubarItemShortcut>Ctrl+Z</MenubarItemShortcut>
                    </MenubarItem>
                    <MenubarItem closeOnClick>
                      Redo
                      <MenubarItemShortcut>Ctrl+Y</MenubarItemShortcut>
                    </MenubarItem>
                    <MenubarSeparator />
                    <MenubarItem closeOnClick>
                      Copy
                      <MenubarItemShortcut>Ctrl+C</MenubarItemShortcut>
                    </MenubarItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Indicator Right With Icon [#indicator-right-with-icon]

Use `indicator="end"` to align checkbox and radio indicators to the end. Text and icon slots accept custom content and `className`.

<Preview>
  <IndicatorRightMenubarExample />

  <Preview.Code>
    {`
          import {
            InfoIcon,
            MapIcon,
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarCheckboxItem,
            MenubarCheckboxItemIndicator,
            MenubarItemText,
            MenubarItemTextContent,
            MenubarItemTextIcon,
            MenubarItemTextLabel,
          } from "moduix";
          import { useState } from "react";

          export function IndicatorRightMenubarDemo() {
            const [showSidebar, setShowSidebar] = useState(true);
            const [showPanel, setShowPanel] = useState(false);

            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>View</MenubarTrigger>
                  <MenubarContent>
                    <MenubarCheckboxItem
                      checked={showSidebar}
                      onCheckedChange={setShowSidebar}
                      indicator="end"
                    >
                      <MenubarItemText>
                        <MenubarItemTextContent>
                          <MenubarItemTextIcon>
                            <InfoIcon />
                          </MenubarItemTextIcon>
                          <MenubarItemTextLabel>Sidebar</MenubarItemTextLabel>
                        </MenubarItemTextContent>
                      </MenubarItemText>
                      <MenubarCheckboxItemIndicator />
                    </MenubarCheckboxItem>
                    <MenubarCheckboxItem
                      checked={showPanel}
                      onCheckedChange={setShowPanel}
                      indicator="end"
                    >
                      <MenubarItemText>
                        <MenubarItemTextContent>
                          <MenubarItemTextIcon>
                            <MapIcon />
                          </MenubarItemTextIcon>
                          <MenubarItemTextLabel>Preview</MenubarItemTextLabel>
                        </MenubarItemTextContent>
                      </MenubarItemText>
                      <MenubarCheckboxItemIndicator />
                    </MenubarCheckboxItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Nested [#nested]

Use `MenubarSubmenu` with `MenubarSubmenuTrigger` and `MenubarSubmenuContent` for nested command groups.

<Preview>
  <NestedMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
            MenubarSubmenu,
            MenubarSubmenuTrigger,
            MenubarSubmenuTriggerIcon,
            MenubarSubmenuContent,
            MenubarSeparator,
          } from "moduix";

          export function NestedMenubarDemo() {
            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>File</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>New File</MenubarItem>
                    <MenubarSubmenu>
                      <MenubarSubmenuTrigger>
                        Export
                        <MenubarSubmenuTriggerIcon />
                      </MenubarSubmenuTrigger>
                      <MenubarSubmenuContent>
                        <MenubarItem closeOnClick>PDF</MenubarItem>
                        <MenubarItem closeOnClick>PNG</MenubarItem>
                        <MenubarItem closeOnClick>SVG</MenubarItem>
                      </MenubarSubmenuContent>
                    </MenubarSubmenu>
                    <MenubarSeparator />
                    <MenubarItem closeOnClick>Print</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Vertical [#vertical]

Set `orientation="vertical"` when the menubar should behave like a compact command rail.

<Preview>
  <VerticalMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
          } from "moduix";

          export function VerticalMenubarDemo() {
            return (
              <Menubar orientation="vertical">
                <MenubarMenu>
                  <MenubarTrigger>Project</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>Create branch</MenubarItem>
                    <MenubarItem closeOnClick>Pull latest</MenubarItem>
                    <MenubarItem closeOnClick>Open in IDE</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>

                <MenubarMenu>
                  <MenubarTrigger>Deploy</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>Staging</MenubarItem>
                    <MenubarItem closeOnClick>Production</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Link Items [#link-items]

Use `MenubarLinkItem` for navigation commands that should render as links while keeping menu focus behavior.

<Preview>
  <LinkItemsMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarLinkItem,
            MenubarSeparator,
            MenubarItem,
          } from "moduix";

          export function LinkItemsMenubarDemo() {
            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>Navigate</MenubarTrigger>
                  <MenubarContent>
                    <MenubarLinkItem href="#projects">Projects</MenubarLinkItem>
                    <MenubarLinkItem href="#teams">Teams</MenubarLinkItem>
                    <MenubarLinkItem href="#billing">Billing</MenubarLinkItem>
                    <MenubarSeparator />
                    <MenubarItem closeOnClick>Copy Link</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Custom Styles [#custom-styles]

Style the root and popup with `className`. Use `classNames` for the internal portal,
backdrop, positioner, and viewport slots rendered by `MenubarContent`.

<Preview>
  <CustomStylesMenubarExample />

  <Preview.Code>
    {`
          import {
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
            MenubarSeparator,
          } from "moduix";

          export function CustomStylesMenubarDemo() {
            return (
              <Menubar className={styles.customRoot}>
                <MenubarMenu>
                  <MenubarTrigger>Window</MenubarTrigger>
                  <MenubarContent
                    className={styles.customPopup}
                    classNames={{
                      portal: styles.customPortal,
                      backdrop: styles.customBackdrop,
                      positioner: styles.customPositioner,
                      viewport: styles.customViewport,
                    }}
                    sideOffset={10}
                    align="start"
                    alignOffset={-4}
                    withArrow
                    withBackdrop
                  >
                    <MenubarItem closeOnClick>Minimize</MenubarItem>
                    <MenubarItem closeOnClick>Zoom</MenubarItem>
                    <MenubarSeparator />
                    <MenubarItem closeOnClick>Bring All to Front</MenubarItem>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .customRoot {
            --menubar-bg: var(--color-background);
            --menubar-border-color: rgb(37 99 235);
            --menubar-radius: var(--radius-lg);
            --menubar-trigger-bg-hover: rgb(219 234 254);
            --menubar-trigger-color-active: rgb(255 255 255);
            --menubar-trigger-bg-active: rgb(37 99 235);
          }

          .customPortal {
            pointer-events: auto;
          }

          .customBackdrop {
            background-color: rgb(15 23 42 / 0.48);
            backdrop-filter: blur(4px);
          }

          .customPositioner {
            --menubar-popup-min-width: 14rem;
          }

          .customPopup {
            --menubar-popup-bg: var(--color-background);
            --menubar-popup-border-color: rgb(37 99 235);
            --menubar-popup-shadow: var(--shadow-lg);
            --menubar-highlight-bg: rgb(37 99 235);
            --menubar-highlight-color: rgb(255 255 255);
          }

          .customViewport {
            padding-block: var(--spacing-2);
          }
        `}
  </Preview.CSS>
</Preview>

### Icons [#icons]

Pass children to icon slots to use icons from your application or an external icon library.

<Preview>
  <IconsMenubarExample />

  <Preview.Code>
    {`
          import {
            ChevronDownIcon,
            MapIcon,
            Menubar,
            MenubarMenu,
            MenubarTrigger,
            MenubarContent,
            MenubarItem,
            MenubarItemTextContent,
            MenubarItemTextIcon,
            MenubarItemTextLabel,
            MenubarSubmenu,
            MenubarSubmenuTrigger,
            MenubarSubmenuTriggerIcon,
            MenubarSubmenuContent,
          } from "moduix";

          export function IconsMenubarDemo() {
            return (
              <Menubar>
                <MenubarMenu>
                  <MenubarTrigger>Places</MenubarTrigger>
                  <MenubarContent>
                    <MenubarItem closeOnClick>
                      <MenubarItemTextContent>
                        <MenubarItemTextIcon>
                          <MapIcon />
                        </MenubarItemTextIcon>
                        <MenubarItemTextLabel>Open map</MenubarItemTextLabel>
                      </MenubarItemTextContent>
                    </MenubarItem>
                    <MenubarSubmenu>
                      <MenubarSubmenuTrigger>
                        More
                        <MenubarSubmenuTriggerIcon>
                          <ChevronDownIcon />
                        </MenubarSubmenuTriggerIcon>
                      </MenubarSubmenuTrigger>
                      <MenubarSubmenuContent>
                        <MenubarItem closeOnClick>Nearby</MenubarItem>
                        <MenubarItem closeOnClick>Routes</MenubarItem>
                      </MenubarSubmenuContent>
                    </MenubarSubmenu>
                  </MenubarContent>
                </MenubarMenu>
              </Menubar>
            );
          }
        `}
  </Preview.Code>
</Preview>