Anatomy

Import and assemble the component:

1import { DropdownMenu } from '@raystack/apsara'
2
3<DropdownMenu>
4  <DropdownMenu.Trigger />
5  <DropdownMenu.Content>
6    <DropdownMenu.Group>
7      <DropdownMenu.Label />
8      <DropdownMenu.Item />
9    </DropdownMenu.Group>
10    <DropdownMenu.Separator />
11  </DropdownMenu.Content>
12</DropdownMenu>

API Reference

Root

The DropdownMenu component is composed of several parts, each with their own props.

The root element is the parent component that holds the dropdown menu. Using the autocomplete prop, you can enable autocomplete functionality. Built on top of Ariakit MenuProvider

Trigger

The button that triggers the dropdown menu. Built on top of Ariakit MenuButton

By default, the click event is not propagated. You can override this behavior by passing stopPropagation={false}.

TriggerItem

TriggerItem is a helper component that renders a DropdownMenu.Trigger as a DropdownMenu.MenuItem.

Accepts all DropdownMenu.Item props. The component is helpful to match styles for sub menu trigger. Use DropdownMenu.Trigger if you want more control.

Content

The container that holds the dropdown menu items. Built on top of Ariakit Menu

Item

Individual clickable options within the dropdown menu. Built on top of Ariakit MenuItem.

Renders as an Ariakit ComboboxItem when used in an autocomplete dropdown. By default, the item's children is used for matching and selection, which can be overriden by passing a value prop.

Group

A way to group related menu items together. Built on top of Ariakit MenuGroup

Label

Renders a label in a menu group. This component should be wrapped with DropdownMenu.Group so the aria-labelledby is correctly set on the group element. Built on top of Ariakit MenuGroupLabel

Separator

Visual divider between menu items or groups. Built on top of Ariakit MenuSeparator

EmptyState

Placeholder content when there are no menu items to display.

Examples

Basic Usage

A simple dropdown menu with basic functionality.

1<DropdownMenu>
2  <DropdownMenu.Trigger asChild>
3    <Button color="neutral">Open Menu</Button>
4  </DropdownMenu.Trigger>
5  <DropdownMenu.Content>
6    <DropdownMenu.Item>Profile</DropdownMenu.Item>
7    <DropdownMenu.Item>Settings</DropdownMenu.Item>
8    <DropdownMenu.Separator />
9    <DropdownMenu.Item>Logout</DropdownMenu.Item>
10  </DropdownMenu.Content>
11</DropdownMenu>

With Icons

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

1<DropdownMenu>
2  <DropdownMenu.Trigger asChild>
3    <Button color="neutral">Actions</Button>
4  </DropdownMenu.Trigger>
5  <DropdownMenu.Content>
6    <DropdownMenu.Item leadingIcon={<>📝</>}>Edit</DropdownMenu.Item>
7    <DropdownMenu.Item leadingIcon={<>📋</>} trailingIcon={<>⌘C</>}>
8      Copy
9    </DropdownMenu.Item>
10    <DropdownMenu.Separator />
11    <DropdownMenu.Item leadingIcon={<>🗑️</>}>Delete</DropdownMenu.Item>
12  </DropdownMenu.Content>
13</DropdownMenu>

With Groups and Labels

Organize related menu items into sections with descriptive headers.

1<DropdownMenu>
2  <DropdownMenu.Trigger asChild>
3    <Button color="neutral">More</Button>
4  </DropdownMenu.Trigger>
5  <DropdownMenu.Content>
6    <DropdownMenu.Label>Actions</DropdownMenu.Label>
7    <DropdownMenu.Group>
8      <DropdownMenu.Item>New File</DropdownMenu.Item>
9      <DropdownMenu.Item>New Folder</DropdownMenu.Item>
10    </DropdownMenu.Group>
11    <DropdownMenu.Separator />
12    <DropdownMenu.Label>Sort By</DropdownMenu.Label>
13    <DropdownMenu.Group>
14      <DropdownMenu.Item>Name</DropdownMenu.Item>
15      <DropdownMenu.Item>Date</DropdownMenu.Item>

Autocomplete

To enable autocomplete, pass the autocomplete prop to the Dropdown root element. Each menu instance will manage its own autocomplete behavior.

By default, only the top-level menu items are filtered. For more advanced control, set autocompleteMode="manual" and implement your own custom filtering logic.

1<DropdownMenu autocomplete>
2  <DropdownMenu.Trigger asChild>
3    <Button color="neutral">Default Autocomplete</Button>
4  </DropdownMenu.Trigger>
5  <DropdownMenu.Content searchPlaceholder="Search">
6    <DropdownMenu.Group>
7      <DropdownMenu.Label>Heading</DropdownMenu.Label>
8      <DropdownMenu.Item>Assign member...</DropdownMenu.Item>
9      <DropdownMenu.Item>Subscribe...</DropdownMenu.Item>
10      <DropdownMenu.Item>Rename...</DropdownMenu.Item>
11    </DropdownMenu.Group>
12    <DropdownMenu.Separator />
13    <DropdownMenu.Label>Actions</DropdownMenu.Label>
14    <DropdownMenu autocomplete>
15      <DropdownMenu.TriggerItem>Export</DropdownMenu.TriggerItem>

Linear inspired Dropdown

This is a Linear-inspired dropdown component that supports custom filtering and displays nested options. Users can search through all nested items using a single input field.

To closely replicate Linear-style filtering, the filtering logic should include result ranking. Using a utility like match-sorter can help achieve this by sorting filtered results based on relevance.

1(function LinearDropdownDemo() {
2  const [searchQuery, setSearchQuery] = useState("");
3
4  const renderDropdownMenu = (items: DropdownMenuItem[], query: string) => {
5    const filteredItems = filterDropdownMenuItems(items, query);
6
7    if (searchQuery && filteredItems.length === 0) {
8      return <div className="no-results">No results</div>;
9    }
10
11    return filteredItems.map((item, index) => {
12      switch (item.type) {
13        case "group":
14          return (
15            <DropdownMenu.Group key={index}>

Accessibility

• Follows the WAI-ARIA Menu pattern
• Trigger uses aria-haspopup and aria-expanded attributes
• Supports keyboard navigation with arrow keys, Enter, and Escape
• Menu items are focusable and support type-ahead selection