Menubar: Disabled

Disable a single menu with disabled on <MenubarMenu />, or the whole bar on <Menubar />. Arrow keys skip disabled menus.

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"

export function MenubarDisabled() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Menubar aria-label="Document">
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Save</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu disabled>
          <MenubarTrigger>Review</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Accept all changes</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Help</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Keyboard shortcuts</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      <Menubar aria-label="Locked document" disabled>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Save</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Undo</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </div>
  )
}

Add this example

This adds the example as components/examples/menubar/disabled.tsx, together with the Menubar component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/menubar-disabled.json

To add only the component, follow the Menubar installation.

Props in this example

The Menubar props this example sets, from the API reference.

Menubar

Prop	Type	Default
`disabled`	`boolean`	`false`

MenubarMenu

Prop	Type	Default
`disabled`	`boolean`	`false`

Every prop is in the Menubar API reference.

More Menubar examples

See them all, with keyboard support and accessibility notes, on the Menubar page.