Dropdown | Tailgrids Docs

Display a menu of actions or options triggered by a button with full keyboard navigation support.

Installation

Anatomy

Import the components and piece them together.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator
} from "@/registry/core/dropdown";

export default () => (
  <DropdownMenu>
    <DropdownMenuTrigger />
    <DropdownMenuContent>
      <DropdownMenuItem />
      <DropdownMenuSeparator />
      <DropdownMenuItem />
    </DropdownMenuContent>
  </DropdownMenu>
);

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem
} from "@/registry/core/dropdown";
import { Button } from "@/registry/core/button";

export default () => (
  <DropdownMenu>
    <DropdownMenuTrigger>
      <Button>Open Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem onAction={() => console.log("Edit")}>
        Edit
      </DropdownMenuItem>
      <DropdownMenuItem onAction={() => console.log("Duplicate")}>
        Duplicate
      </DropdownMenuItem>
      <DropdownMenuItem onAction={() => console.log("Delete")}>
        Delete
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);

Examples

With Separator

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Icons

Icon size and color are adjusted

import { Pencil, Copy, Trash } from "@tailgrids/icons";

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      <Edit className="size-4" />
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Copy className="size-4" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <Trash2 className="size-4" />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

Custom Trigger

<DropdownMenu>
  <DropdownMenuTrigger>
    <button className="rounded-lg px-4 py-2 bg-neutral-100">
      Custom Trigger
    </button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Option 1</DropdownMenuItem>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenu

The root component. Extends MenuTriggerProps from React Aria.

DropdownMenuTrigger

The button that opens the dropdown menu. Extends ButtonProps from React Aria.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`children`	`React.ReactNode`	Trigger content

DropdownMenuContent

The popover container for menu items. Extends PopoverProps from React Aria.

Prop	Type	Description
`children`	`React.ReactNode`	Menu items and separators

DropdownMenuItem

An individual menu item. Extends MenuItemProps from React Aria.

Prop	Type	Description
`onAction`	`() => void`	Callback when item is selected
`className`	`string`	Additional CSS classes
`children`	`React.ReactNode`	Item content

DropdownMenuSeparator

A horizontal divider between menu items. Extends hr element props.

Prop	Type	Description
`className`	`string`	Additional CSS classes

Accessibility

Built on React Aria Components for robust accessibility
Full keyboard navigation (Arrow keys, Enter, Escape)
Automatic focus management
ARIA attributes for screen readers
Click outside to close
Escape key to dismiss

Notes

Uses React Aria Components for accessibility and interaction patterns
Menu automatically positions itself to stay within viewport
Focus returns to trigger when menu closes
Menu items support hover and focus states
Separators provide visual grouping of related actions

CLI

Manual

On this page