Primitives

Dropdown

Context menu on Radix, on the overlay surface. The highlighted row takes the brand tint and its icon and shortcut turn brand. Items, icons, labels, shortcuts, checkbox and radio items, submenus and keyboard navigation.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add dropdown

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

dropdown.tsx

tsx

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
  DropdownMenuLabel, DropdownMenuShortcut,
  DropdownMenuDestructiveItem,
} from "@/components/entrepta/dropdown"
import { GearIcon, UserIcon } from "@phosphor-icons/react"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary">~/options ↓</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>account</DropdownMenuLabel>
    <DropdownMenuItem>
      <UserIcon aria-hidden size={14} /> profile.tsx
      <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <GearIcon aria-hidden size={14} /> settings.json
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuDestructiveItem>rm -rf session</DropdownMenuDestructiveItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

Prop	Type	Default	Description
open	boolean	-	Controlled open state
onOpenChange	(open: boolean) => void	-	Callback when open state changes
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Placement relative to trigger (on DropdownMenuContent)
align	"start" \| "center" \| "end"	"start"	Alignment along the trigger (on DropdownMenuContent)