Menubar

A visually persistent, OS-style menu component that provides quick access to a consistent set of commands.

Native application menus have complex, unwritten interaction rules. If you click to open "File", and then hover your mouse horizontally over "Edit", the "Edit" menu should instantly open while "File" closes. Building this from scratch is notoriously difficult. This MenubarBlock solves all of that natively in React using Context, providing a 100% dependency-free implementation.

Click a trigger to open its menu, then hover the neighbours — they swap instantly, exactly like a native app.

Menubar

Nest MenubarMenu → MenubarTrigger + MenubarContent.

value: on each MenubarMenu is required — it is how the context tracks which dropdown is open.
align: on MenubarContent anchors the dropdown to its trigger: start (the default), center or end.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Menubar

npx shadcn@latest add @algorize-ui/menubar

components/custom/blocks/MenubarBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Menubar needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Application menubar

className: on the bar is how you strip its chrome to fuse it into a window title bar.

Features

Learn about the Menubar's desktop-style navigation features, supporting complex nested menus, radio groups, and checkboxes.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Description
`MenubarMenu`	`value`	`string`	Required. A unique identifier for the menu column (e.g., `"file"`). Used by the internal state context to track which dropdown is open.
`MenubarContent`	`align`	`"start" \| "center" \| "end"`	Determines how the dropdown is anchored relative to its trigger button. Defaults to `"start"`.
`MenubarItem`	`inset`	`boolean`	Adds extra left-padding to the item, aligning text cleanly when adjacent items use icons.
`MenubarItem`	`disabled`	`boolean`	Dims the item, changes the cursor, and completely disables pointer events and click handlers.
`MenubarItem`	`onClick`	`() => void`	Fires your custom action. The menu will automatically close after the click.
`MenubarLabel`	`inset`	`boolean`	Aligns the label text with `inset` menu items.
All Components	`className`	`string`	Every component supports custom Tailwind classes for easy styling overrides.