Menubar

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Menubar

className

React.ComponentProps<typeof MenubarPrimitive.Root>

MenubarCheckboxItem

className
children
checked

React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>

MenubarContent

className
align = "start"
alignOffset = -4
sideOffset = 8

React.ComponentProps<typeof MenubarPrimitive.Content>

MenubarGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof MenubarPrimitive.Group>

MenubarItem

className
inset
variant = "default"

React.ComponentProps<typeof MenubarPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive"; }

MenubarLabel

className
inset

React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean; }

MenubarMenu

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof MenubarPrimitive.Menu>

MenubarPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof MenubarPrimitive.Portal>

MenubarRadioGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof MenubarPrimitive.RadioGroup>

MenubarRadioItem

className
children

React.ComponentProps<typeof MenubarPrimitive.RadioItem>

MenubarSeparator

className

React.ComponentProps<typeof MenubarPrimitive.Separator>

MenubarShortcut

className

React.ComponentProps<"span">

MenubarSub

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof MenubarPrimitive.Sub>

MenubarSubContent

className

React.ComponentProps<typeof MenubarPrimitive.SubContent>

MenubarSubTrigger

className
inset
children

React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean; }

MenubarTrigger

className

React.ComponentProps<typeof MenubarPrimitive.Trigger>

Code

// owner: Sona
"use client";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

export default function MenubarExample() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New workspace</MenubarItem>
          <MenubarItem>Open...</MenubarItem>
          <MenubarItem disabled>Share</MenubarItem>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            Delete
            <MenubarShortcut>⌘⌫</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show sidebar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show timeline</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarLabel>Layout</MenubarLabel>
          <MenubarRadioGroup value="grid">
            <MenubarRadioItem value="grid">Grid</MenubarRadioItem>
            <MenubarRadioItem value="split">Split</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profile</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>View API keys</MenubarItem>
          <MenubarItem>Sign out</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Menubar

Component preview

On this page

Command Palette