Component reference
DropdownMenu
Commands attached to a record action trigger.
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 { useState } from "react";
import {
DropdownMenu,
DropdownMenuTrigger,
Button,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuSeparator,
Badge
} from "@pimolu/react";
function ActionsMenu() {
const [lastAction, setLastAction] = useState("none");
return (
<div className="flex flex-wrap items-center gap-3 min-w-0">
<DropdownMenu>
<DropdownMenuTrigger>
<Button appearance="outline">Actions</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Project</DropdownMenuLabel>
<DropdownMenuItem onSelect={() => setLastAction("Rename")}>Rename</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setLastAction("Duplicate")}>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem disabled onSelect={() => setLastAction("Archive")}>Archive</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setLastAction("Delete")}>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Badge variant="neutral">
last action: {lastAction}
</Badge>
</div>
);
}
export function DemoExample() {
return (<ActionsMenu />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Alignment and anchors
The panel is centred under the trigger; use align='end' for a trailing menu.
Row actions
A row actions composition using DropdownMenu.
Compact trigger
A compact trigger composition using DropdownMenu.
Usage
Use commands for mutations and links for navigation; show the outcome near the affected content.
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.
PimoluDropdownMenuProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
open | boolean | undefined | — | Public Pimolu prop; see the source declaration for details. |
defaultOpen | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
onOpenChange | ((open: boolean) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
openboolean | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultOpenboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
onOpenChange((open: boolean) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDropdownMenuTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDropdownMenuContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
sideOffset | number | undefined | 6 | Distance from the trigger. Defaults to 6. |
align | "start" | "end" | undefined | "start" | 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.
sideOffsetnumber | undefinedDefault: 6
Distance from the trigger. Defaults to 6.
align"start" | "end" | undefinedDefault: "start"
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDropdownMenuItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
onSelect | (() => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
onSelect(() => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
PimoluDropdownMenuSeparatorProps
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.
PimoluDropdownMenuLabelProps
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
- Name the trigger and check arrow navigation, disabled items and Escape restoration.