Neumorphism UI

Menubar

Use Menubar for application commands organized into persistent menus such as File and View.

Preview

File and view menus

Create a local document message from File and toggle its visibility from a checked View item.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/menubar

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Place MenubarMenu groups inside a named Menubar, each with a trigger and content. Connect command items to actions and checked items to persistent application preferences.

"use client";

import { useState } from "react";
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <Menubar aria-label="Document menu">
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>Show status</MenubarCheckboxItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      {visible && <p>All changes saved.</p>}
    </div>
  );
}

API Reference

Menubar owns focus navigation; the existing Dropdown Menu parts own popup and selection behavior.

ComponentPropTypeDefaultDescription
Menubarorientation"horizontal" | "vertical"—Sets the direction of keyboard navigation.
MenubarTriggerdisabledboolean—Disables the menu trigger.
MenubarCheckboxItemchecked / onCheckedChangeboolean / (checked: boolean) => void—Controlled state of a checkable item.

Accessibility

  • 01

    Use for application commands, not ordinary page links, and label the menubar.

  • 02

    Arrow keys move between menus. Disabled items cannot execute.