Documentation Examples

Dropdown MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a button.

A basic example demonstrating the dropdown menu's appearance and interaction.

Follow these steps to add the dropdown menu component to your project. Install the component from your command line.

npm install @raystack/apsara

Learn how the dropdown menu is structured and how its parts work together. Import all parts and piece them together.

import { DropdownMenu } from '@raystack/apsara/v1'

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button variant="secondary">Dropdown button</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Item 1</DropdownMenu.Item>
    <DropdownMenu.Item>Item 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Customize the dropdown menu's behavior and appearance with these configuration options. The DropdownMenu component is composed of several parts, each with their own props:

DropdownMenu.Trigger

The button that opens the dropdown menu.

asChild: Boolean to merge props onto child element

DropdownMenu.Content

The container that holds the dropdown menu items.

align: Alignment of the dropdown ("start" | "center" | "end")
sideOffset: Offset from the trigger (number, default: 4)
className: Additional CSS class names

DropdownMenu.Item

Individual clickable options within the dropdown menu.

leadingIcon: Icon element to display before item text (ReactNode)
trailingIcon: Icon element to display after item text (ReactNode)
disabled: Whether the item is disabled (boolean)
className: Additional CSS class names

DropdownMenu.Group

A way to group related menu items together.

className: Additional CSS class names

DropdownMenu.Label

Text labels to describe groups of menu items.

className: Additional CSS class names

DropdownMenu.Separator

Visual divider between menu items or groups.

className: Additional CSS class names

DropdownMenu.EmptyState

Placeholder content when there are no menu items to display.

children: React nodes to render in empty state
className: Additional CSS class names

Explore different ways to implement the dropdown menu component.

A simple dropdown menu with basic functionality.

loading...

You can add icons to the dropdown items. Supports both leading and trailing icons.

loading...

With Groups and Labels

Organize related menu items into sections with descriptive headers.

loading...