> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# DropdownMenu
> A menu anchored to a trigger, built from DropdownMenuTrigger, DropdownMenuContent and its item, checkbox, radio, group, label and separator parts.
```tsx theme={null}
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuHeader,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@fanvue/ui";
import type {
DropdownMenuCheckboxItemProps,
DropdownMenuContentProps,
DropdownMenuGroupProps,
DropdownMenuHeaderProps,
DropdownMenuHeaderSearchProps,
DropdownMenuHeaderSize,
DropdownMenuHeaderType,
DropdownMenuItemProps,
DropdownMenuItemSize,
DropdownMenuLabelPosition,
DropdownMenuLabelProps,
DropdownMenuProps,
DropdownMenuRadioGroupProps,
DropdownMenuRadioItemProps,
DropdownMenuRadioItemSize,
DropdownMenuSeparatorProps,
DropdownMenuTriggerProps,
} from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@fanvue/ui";
Option 1Option 2Option 3
```
## As Child Link
```tsx theme={null}
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@fanvue/ui";
SettingsProfile
```
## With Icons
```tsx theme={null}
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
EditIcon,
StarIcon,
} from "@fanvue/ui";
}>Edit
}>Favourite
```
## Size Matrix
```tsx theme={null}
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@fanvue/ui";
Size 40Default
Selected
Disabled
Error
Size 32Default
Selected
Disabled
Error
```
## Feature Items
```tsx theme={null}
import {
Avatar,
Button,
ChevronRightIcon,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
EditIcon,
StarIcon,
} from "@fanvue/ui";
}
trailingIcon={}
>
Jane Doe
}
description="Product designer"
count="12"
>
Alex Smith
} count="99+">
Favourites
} description="Update your details">
Edit profile
```
## Props
## DropdownMenu
Root component that manages open/close state for a dropdown menu.
How the menu presents its content.
## DropdownMenuCheckboxItem
A single multi-select choice within a dropdown menu. Shows a square indicator that fills when checked, an optional leading avatar, and an optional helper line underneath the title.
Pair with `DropdownMenuHeader` at `type="search"` for filterable menus. Use `DropdownMenuRadioItem` instead when only one option may be active.
Leading avatar rendered between the checkbox and the title. Render at 32px to match the design.
Optional secondary text shown below the title.
## DropdownMenuContent
The positioned content panel rendered inside a portal.
Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or globally with the `--fanvue-ui-portal-z-index` CSS custom property.
## DropdownMenuGroup
Groups related menu items. Accepts an optional `DropdownMenuLabel`.
Requires Radix menu context — not supported inside a `variant="sheet"` menu.
A direct re-export of the Radix `DropdownMenuPrimitive.Group` primitive. It accepts all of that primitive's props, unchanged.
## DropdownMenuHeader
Optional header rendered at the top of a `DropdownMenuContent`. Use `type="default"` to title the menu, or `type="search"` to embed a search input for filtering long lists.
Renders an inset separator beneath the row so it slots cleanly above the first group of items.
Accessible label for the close button.
Fires when the close icon button is activated.
Configuration for the embedded search input when `type="search"`.
Whether to render the close icon button on the right.
Height preset for the header row.
Title text shown when `type="default"`. Ignored if `children` is provided.
Visual type. `"default"` shows a title; `"search"` shows a search input.
## DropdownMenuItem
An individual item within a `DropdownMenuContent`.
Leading avatar rendered in place of `DropdownMenuItemProps.leadingIcon`, for rows that represent a person or account. Pass an `Avatar` sized to `24`. Takes precedence over `leadingIcon`.
Trailing count or number (e.g. an unread total) rendered before `DropdownMenuItemProps.trailingIcon`.
Optional secondary text rendered on a second line below the label. When provided, the row switches to a two-line layout and the leading/trailing icons align to the title line (top) rather than the row's vertical centre.
Applies the destructive (error) treatment. Use for irreversible actions.
Icon (or other node) rendered before the label. Ignored when `DropdownMenuItemProps.avatar` is set.
Marks the item as the current selection in a single-select menu.
Height of the menu item row.
Icon (or other node) rendered after the label. When `DropdownMenuItemProps.selected` is true and no `trailingIcon` is given, the built-in selected check indicator renders in this slot instead — pass a `trailingIcon` to use a custom selected indicator (e.g. a themed tick) rather than the default one.
## DropdownMenuLabel
A non-interactive label that groups related items within a menu.
Vertical placement within the surrounding group. `"top"` is used for the first label directly under a header; `"default"` adds extra top padding to separate it from preceding items.
## DropdownMenuRadioGroup
Groups `DropdownMenuRadioItem` children so they behave as a single-select set. Controlled via `value`/`onValueChange`.
A direct re-export of the Radix `DropdownMenuPrimitive.RadioGroup` primitive. It accepts all of that primitive's props, unchanged.
## DropdownMenuRadioItem
A single radio-style choice within a `DropdownMenuRadioGroup`. Shows a circular indicator that fills when selected, plus an optional helper line underneath the title.
Optional secondary text shown below the title.
Height of the item row.
## DropdownMenuSeparator
Visual separator between groups of items.
## DropdownMenuTrigger
The element that toggles the dropdown menu when clicked.
On touch devices, the menu only opens if the press-and-release stays within a small movement threshold. A drag that incidentally ends over the trigger (common when scrolling a feed on Android Chrome) is ignored. Mouse and keyboard interactions are unchanged.
## Exported types
Also exported from `@fanvue/ui`: `DropdownMenuCheckboxItemProps`, `DropdownMenuContentProps`, `DropdownMenuGroupProps`, `DropdownMenuHeaderProps`, `DropdownMenuHeaderSearchProps`, `DropdownMenuHeaderSize`, `DropdownMenuHeaderType`, `DropdownMenuItemProps`, `DropdownMenuItemSize`, `DropdownMenuLabelPosition`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroupProps`, `DropdownMenuRadioItemProps`, `DropdownMenuRadioItemSize`, `DropdownMenuSeparatorProps`, `DropdownMenuTriggerProps`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)