Navigation & disclosure@neumorphism-ui/menubar

Menubar

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

@neumorphism-ui/menubar

Registry JSON

Preview

Ready

Installation

npx shadcn@latest add @neumorphism-ui/menubar

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";
import * as React from "react";
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem } from "@/components/ui/menubar";

Example

export default function Example() {
  const [visible, setVisible] = React.useState(true);
  const [message, setMessage] = React.useState("Ready");
  return <div><Menubar aria-label="File"><MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem onClick={() => setMessage("Document created")}>New document</MenubarItem></MenubarContent></MenubarMenu><MenubarMenu><MenubarTrigger>View</MenubarTrigger><MenubarContent><MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>Show status</MenubarCheckboxItem></MenubarContent></MenubarMenu></Menubar>{visible && <p role="status">{message}</p>}</div>;
}

API Reference

Component	Prop	Type	Default	Description
`Menubar`	`orientation`	`"horizontal" \| "vertical"`	`—`	Sets the direction of keyboard navigation.
`MenubarTrigger`	`disabled`	`boolean`	`—`	Disables the menu trigger.
`MenubarCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	Controlled state of a checkable item.