Dropdown Menu — Componentes

🚀 saastro/ui (Astro)

⚛️ shadcn/ui (React)

Installation

npx saastro add dropdown-menu

Usage

---
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui-saastro/dropdown-menu";
import { button } from "@/components/ui-saastro/button";
---

<DropdownMenu>
  <DropdownMenuTrigger class={button({ variant: "outline" })}>
    Open
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

DropdownMenuContent

Prop	Type	Default	Description
align	`"start" \| "center" \| "end"`	`"start"`	Horizontal alignment
side	`"top" \| "bottom"`	`"bottom"`	Vertical position

DropdownMenuItem

Prop	Type	Default	Description
inset	`boolean`	`false`	Add left padding for icon alignment
disabled	`boolean`	`false`	Disable the item

DropdownMenuCheckboxItem

Prop	Type	Default	Description
checked	`boolean`	`false`	Whether the item is checked

DropdownMenuRadioItem

Prop	Type	Default	Description
value	`string`	Required	The value when selected
checked	`boolean`	`false`	Whether the item is selected

Accessibility

Uses role="menu" for screen readers
Keyboard navigation with Arrow Up/Down
Items use role="menuitem"
Closes on Escape key

Performance

Performance Benchmark

Bundle Size

Hydration

0ms vs

Sin hydration

Open Response

Saastro (Vanilla JS)

shadcn (React)