A list of actions in a dropdown, enhanced with keyboard navigation.
Installation
npx shadcn@latest add @caprice/menunpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };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 menu 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 `<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-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 `<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-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"