Components
DropdownMenu
A menu of actions revealed by a trigger click.
DropdownMenu is built on the Base UI Menu primitive. It displays a list of actions when the user clicks a trigger element.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/dropdown-menu.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export default function Example() {
return (
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline">Open</Button>} />
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}Examples
Default
With shortcuts
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
DropdownMenudata-slot="dropdown-menu" | Menu.RootBase UI | — |
DropdownMenuPortaldata-slot="dropdown-menu-portal" | Menu.PortalBase UI | — |
DropdownMenuTriggerdata-slot="dropdown-menu-trigger" | Menu.TriggerBase UI | — |
DropdownMenuContentdata-slot="dropdown-menu-content" | Menu.PopupBase UI |
|
DropdownMenuGroupdata-slot="dropdown-menu-group" | Menu.GroupBase UI | — |
DropdownMenuLabeldata-slot="dropdown-menu-label" | Menu.GroupLabelBase UI |
|
DropdownMenuItemdata-slot="dropdown-menu-item" | Menu.ItemBase UI |
|
DropdownMenuSubdata-slot="dropdown-menu-sub" | Menu.SubmenuRootBase UI | — |
DropdownMenuSubTriggerdata-slot="dropdown-menu-sub-trigger" | Menu.SubmenuTriggerBase UI |
|
DropdownMenuSubContentdata-slot="dropdown-menu-sub-content" | DropdownMenuContentFaber UI | — |
DropdownMenuCheckboxItemdata-slot="dropdown-menu-checkbox-item" | Menu.CheckboxItemBase UI |
|
DropdownMenuRadioGroupdata-slot="dropdown-menu-radio-group" | Menu.RadioGroupBase UI | — |
DropdownMenuRadioItemdata-slot="dropdown-menu-radio-item" | Menu.RadioItemBase UI |
|
DropdownMenuSeparatordata-slot="dropdown-menu-separator" | Menu.SeparatorBase UI | — |
DropdownMenuShortcutdata-slot="dropdown-menu-shortcut" | <span>HTML | — |
Changelog
- v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
- v0.1.0Restore open and close animations on every menu-family popup.patch
Last updated on