React Dropdown Component | Tailgrids Docs

React Dropdown components are used to display a list of actions or options in a compact menu. They are commonly used for contextual actions, overflow menus, and option selectors.

This Dropdown component is built with React and styled using Tailwind CSS. It uses React Aria for accessible keyboard and focus handling.

Installation

Anatomy

Import the component parts and combine them.

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

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

Usage

Import the dropdown components and wrap a trigger with menu items.

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

Use separators to group related actions.

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

With Icons

Add icons to menu items for better visual context.

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

Use a custom element as the dropdown 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
Screen reader-friendly ARIA attributes
Click outside and Escape key close the menu
Focus returns to the trigger when the menu closes

Notes

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

CLI

Manual

On this page