Faber UI
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

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/dropdown-menu.json

Usage

typescript
"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.

PartBuilt onProps
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
  • align? = "start"Menu.Positioner["align"]
  • alignOffset? = 0Menu.Positioner["alignOffset"]
  • side? = "bottom"Menu.Positioner["side"]
  • sideOffset? = 4Menu.Positioner["sideOffset"]
DropdownMenuGroupdata-slot="dropdown-menu-group"Menu.GroupBase UI—
DropdownMenuLabeldata-slot="dropdown-menu-label"Menu.GroupLabelBase UI
  • inset?boolean
DropdownMenuItemdata-slot="dropdown-menu-item"Menu.ItemBase UI
  • inset?boolean
  • variant? = "default""default" | "destructive"
DropdownMenuSubdata-slot="dropdown-menu-sub"Menu.SubmenuRootBase UI—
DropdownMenuSubTriggerdata-slot="dropdown-menu-sub-trigger"Menu.SubmenuTriggerBase UI
  • inset?boolean
DropdownMenuSubContentdata-slot="dropdown-menu-sub-content"DropdownMenuContentFaber UI—
DropdownMenuCheckboxItemdata-slot="dropdown-menu-checkbox-item"Menu.CheckboxItemBase UI
  • inset?boolean
DropdownMenuRadioGroupdata-slot="dropdown-menu-radio-group"Menu.RadioGroupBase UI—
DropdownMenuRadioItemdata-slot="dropdown-menu-radio-item"Menu.RadioItemBase UI
  • inset?boolean
DropdownMenuSeparatordata-slot="dropdown-menu-separator"Menu.SeparatorBase UI—
DropdownMenuShortcutdata-slot="dropdown-menu-shortcut"<span>HTML—

Changelog

  1. 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
  2. v0.1.0Restore open and close animations on every menu-family popup.patch
Full DropdownMenu history

Last updated on

On this page