Component reference
Menubar
Desktop-style application commands with local feedback.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarLabel,
MenubarItem,
MenubarSeparator,
Badge
} from "@pimolu/react";
import { useState } from "react";
function EditorMenubar({ onAction, }: {
onAction: (action: string) => void;
}) {
return (
<Menubar aria-label="Project menu">
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarLabel>Project</MenubarLabel>
<MenubarItem onSelect={() => onAction("New window")}>New window</MenubarItem>
<MenubarItem onSelect={() => onAction("Open project")}>Open…</MenubarItem>
<MenubarItem onSelect={() => onAction("Save")}>Save</MenubarItem>
<MenubarSeparator />
<MenubarItem onSelect={() => onAction("Export as PDF")}>Export as PDF</MenubarItem>
<MenubarItem disabled>Print</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem onSelect={() => onAction("Undo")}>Undo</MenubarItem>
<MenubarItem onSelect={() => onAction("Redo")}>Redo</MenubarItem>
<MenubarSeparator />
<MenubarItem onSelect={() => onAction("Cut")}>Cut</MenubarItem>
<MenubarItem onSelect={() => onAction("Copy")}>Copy</MenubarItem>
<MenubarItem onSelect={() => onAction("Paste")}>Paste</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarItem onSelect={() => onAction("Zoom in")}>Zoom in</MenubarItem>
<MenubarItem onSelect={() => onAction("Zoom out")}>Zoom out</MenubarItem>
<MenubarSeparator />
<MenubarItem onSelect={() => onAction("Toggle full screen")}>Full screen</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Help</MenubarTrigger>
<MenubarContent>
<MenubarItem onSelect={() => onAction("Open documentation")}>Documentation</MenubarItem>
<MenubarItem onSelect={() => onAction("Keyboard shortcuts")}>Keyboard shortcuts</MenubarItem>
<MenubarSeparator />
<MenubarItem onSelect={() => onAction("About Acme Studio")}>About Acme Studio</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
);
}
export function DemoExample() {
const [lastAction, setLastAction] = useState("Nothing selected yet");
return (
<div className="grid gap-5 min-w-0">
<div
className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
style={{
flexWrap: "wrap"
}}
>
<EditorMenubar
onAction={(action) => setLastAction(`File menu · ${action}`)}
/>
<Badge variant="neutral">
{lastAction}
</Badge>
</div>
<p className="max-w-prose leading-relaxed">
Open a menu and choose an item: the panel closes, focus returns
to the trigger and the chosen command is reported here.
</p>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Localized editing commands
Choose a command and observe the result; unavailable actions remain disabled.
In context
Menubar fits a document editor or a desktop-style workspace. Here it shares a header with a primary action.
Compact workspace menu
MenubarLabel groups related commands and a disabled trigger remains visible without opening.
Usage
Use Menubar for commands, and Navbar or NavigationMenu for destinations.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluMenubarProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | "Menu bar" | Accessible name of the menubar. Defaults to "Menu bar". |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedDefault: "Menu bar"
Accessible name of the menubar. Defaults to "Menu bar".
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluMenubarMenuProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
value | string | undefined | — | Stable identity of the menu. Omit to let the component generate one. Useful only when the same menu must be addressed programmatically. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
valuestring | undefinedNo default extracted.
Stable identity of the menu. Omit to let the component generate one. Useful only when the same menu must be addressed programmatically.
PimoluMenubarTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLButtonElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluMenubarContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
sideOffset | number | undefined | 4 | Distance from the trigger. Defaults to 4. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
sideOffsetnumber | undefinedDefault: 4
Distance from the trigger. Defaults to 4.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluMenubarItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
onSelect | (() => void) | undefined | — | Runs before the menu closes and returns focus to its trigger. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
onSelect(() => void) | undefinedNo default extracted.
Runs before the menu closes and returns focus to its trigger.
onChangeChangeEventHandler<HTMLButtonElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluMenubarSeparatorProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluMenubarLabelProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Verify arrow navigation, disabled-item skipping, Escape and focus return at a scrolled position.