A list of actions in a dropdown, enhanced with keyboard navigation.
Installation
npx shadcn@latest add @caprice/menupnpm dlx shadcn@latest add @caprice/menuyarn dlx shadcn@latest add @caprice/menubunx shadcn@latest add @caprice/menunpm install @caprice-ui/reactpnpm add @caprice-ui/reactyarn add @caprice-ui/reactbun add @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactpnpm add @base-ui/react lucide-reactyarn add @base-ui/react lucide-reactbun add @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';
export const { cva, cx: cn } = defineConfig({
hooks: {
onComplete: (className: string) => twMerge(className),
},
});
export type { VariantProps };
export { getSchema };
Copy and paste the following code into your project.
'use client';
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
import { cn } from '@/lib/utils';
/**
* Groups all parts of the menu.
* Doesn't render its own HTML element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#root)
*/
export namespace Root {
export type Props = React.ComponentProps<typeof MenuPrimitive.Root>;
export type Actions = MenuPrimitive.Root.Actions;
export type ChangeEventDetails = MenuPrimitive.Root.ChangeEventDetails;
export type ChangeEventReason = MenuPrimitive.Root.ChangeEventReason;
export type Orientation = MenuPrimitive.Root.Orientation;
}
export function Root({ ...props }: Root.Props) {
return <MenuPrimitive.Root data-slot="menu" {...props} />;
}
/**
* A button that opens the menu.
* Renders a `<button>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#trigger)
*/
export namespace Trigger {
export type Props = React.ComponentProps<typeof MenuPrimitive.Trigger>;
export type State = MenuPrimitive.Trigger.State;
}
export function Trigger({ ...props }: Trigger.Props) {
return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
}
/**
* A portal element that moves the popup to a different part of the DOM.
* By default, the portal element is appended to `<body>`.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#portal)
*/
export namespace Portal {
export interface State extends MenuPrimitive.Portal.State {}
export type Props = React.ComponentProps<typeof MenuPrimitive.Portal>;
}
export function Portal({ ...props }: Portal.Props) {
return <MenuPrimitive.Portal data-slot="menu-portal" {...props} />;
}
/**
* An overlay displayed beneath the menu popup.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#backdrop)
*/
export namespace Backdrop {
export type State = MenuPrimitive.Backdrop.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Backdrop>;
}
export function Backdrop({ ...props }: Backdrop.Props) {
return <MenuPrimitive.Backdrop data-slot="menu-backdrop" {...props} />;
}
/**
* Positions the menu popup against the trigger.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#positioner)
*/
export namespace Positioner {
export type State = MenuPrimitive.Positioner.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Positioner>;
}
export function Positioner({ ...props }: Positioner.Props) {
return (
<MenuPrimitive.Portal data-slot="menu-portal">
<MenuPrimitive.Positioner data-slot="menu-positioner" {...props} />
</MenuPrimitive.Portal>
);
}
/**
* A container for the menu items.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#popup)
*/
export namespace Popup {
export type Props = React.ComponentProps<typeof MenuPrimitive.Popup>;
export type State = MenuPrimitive.Popup.State;
}
export function Popup({ ...props }: Popup.Props) {
return <MenuPrimitive.Popup data-slot="menu-popup" {...props} />;
}
/**
* Displays an element positioned against the menu anchor.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#arrow)
*/
export namespace Arrow {
export type State = MenuPrimitive.Arrow.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Arrow>;
}
export function Arrow({ ...props }: Arrow.Props) {
return <MenuPrimitive.Arrow data-slot="menu-arrow" {...props} />;
}
/**
* An individual interactive item in the menu.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#item)
*/
export namespace Item {
export type State = MenuPrimitive.Item.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Item>;
}
export function Item({ ...props }: Item.Props) {
return <MenuPrimitive.Item data-slot="menu-item" {...props} />;
}
/**
* Groups all parts of a submenu.
* Doesn't render its own HTML element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#submenu-root)
*/
export namespace SubmenuRoot {
export type State = MenuPrimitive.SubmenuRoot.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;
export type ChangeEventDetails = MenuPrimitive.SubmenuRoot.ChangeEventDetails;
export type ChangeEventReason = MenuPrimitive.SubmenuRoot.ChangeEventReason;
}
export function SubmenuRoot({ ...props }: SubmenuRoot.Props) {
return <MenuPrimitive.SubmenuRoot data-slot="menu-submenu" {...props} />;
}
/**
* A menu item that opens a submenu.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#submenu-trigger)
*/
export namespace SubmenuTrigger {
export type State = MenuPrimitive.SubmenuTrigger.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>;
}
export function SubmenuTrigger({ ...props }: SubmenuTrigger.Props) {
return <MenuPrimitive.SubmenuTrigger data-slot="menu-submenu-trigger" {...props} />;
}
/**
* Groups related menu items with the corresponding label.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#group)
*/
export namespace Group {
export type State = MenuPrimitive.Group.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Group>;
}
export function Group({ ...props }: Group.Props) {
return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
}
/**
* An accessible label that is automatically associated with its parent group.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#group-label)
*/
export namespace GroupLabel {
export type State = MenuPrimitive.GroupLabel.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.GroupLabel>;
}
export function GroupLabel({ ...props }: GroupLabel.Props) {
return <MenuPrimitive.GroupLabel data-slot="menu-group-label" {...props} />;
}
/**
* Groups related radio items.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#radio-group)
*/
export namespace RadioGroup {
export type Props = React.ComponentProps<typeof MenuPrimitive.RadioGroup>;
export type State = MenuPrimitive.RadioGroup.State;
export type ChangeEventDetails = MenuPrimitive.RadioGroup.ChangeEventDetails;
export type ChangeEventReason = MenuPrimitive.RadioGroup.ChangeEventReason;
}
export function RadioGroup({ ...props }: RadioGroup.Props) {
return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
}
/**
* A menu item that works like a radio button in a given group.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#radio-item)
*/
export namespace RadioItem {
export type State = MenuPrimitive.RadioItem.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.RadioItem>;
}
export function RadioItem({ ...props }: RadioItem.Props) {
return <MenuPrimitive.RadioItem data-slot="menu-radio-item" {...props} />;
}
/**
* Indicates whether the radio item is selected.
* Renders a `<span>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#radio-item-indicator)
*/
export namespace RadioItemIndicator {
export type State = MenuPrimitive.RadioItemIndicator.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>;
}
export function RadioItemIndicator({ ...props }: RadioItemIndicator.Props) {
return <MenuPrimitive.RadioItemIndicator data-slot="menu-radio-item-indicator" {...props} />;
}
/**
* A menu item that toggles a setting on or off.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#checkbox-item)
*/
export namespace CheckboxItem {
export type Props = React.ComponentProps<typeof MenuPrimitive.CheckboxItem>;
export type State = MenuPrimitive.CheckboxItem.State;
export type ChangeEventDetails = MenuPrimitive.CheckboxItem.ChangeEventDetails;
export type ChangeEventReason = MenuPrimitive.CheckboxItem.ChangeEventReason;
}
export function CheckboxItem({ ...props }: CheckboxItem.Props) {
return <MenuPrimitive.CheckboxItem data-slot="menu-checkbox-item" {...props} />;
}
/**
* Indicates whether the checkbox item is ticked.
* Renders a `<span>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#checkbox-item-indicator)
*/
export namespace CheckboxItemIndicator {
export type State = MenuPrimitive.CheckboxItemIndicator.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>;
}
export function CheckboxItemIndicator({ ...props }: CheckboxItemIndicator.Props) {
return (
<MenuPrimitive.CheckboxItemIndicator data-slot="menu-checkbox-item-indicator" {...props} />
);
}
/**
* A separator element accessible to screen readers.
* Renders a `<div>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*
* API Reference: [Base UI Menu](https://base-ui.com/react/components/menu#separator)
*/
export namespace Separator {
export type State = MenuPrimitive.Separator.State;
export type Props = React.ComponentProps<typeof MenuPrimitive.Separator>;
}
export function Separator({ ...props }: Separator.Props) {
return <MenuPrimitive.Separator data-slot="menu-separator" {...props} />;
}
/**
* A shortcut element, used to display a keyboard shortcut.
* Renders a `<span>` element.
*
* Documentation: [Caprice UI Menu](https://caprice-ui.com/docs/components/menu)
*/
export namespace Shortcut {
export type Props = React.ComponentProps<'span'>;
}
export function Shortcut({ className, ...props }: Shortcut.Props) {
return (
<span
className={cn('ml-auto text-muted-foreground text-xs tracking-widest', className)}
data-slot="menu-shortcut"
{...props}
/>
);
}
Update the import paths to match your project setup.
Usage
import * as Menu from "@/components/caprice-ui/menu"import * as Menu from "@caprice-ui/react/menu"Examples
API Reference
Last updated on