Examples
Default
As Child Link
With Icons
Size Matrix
Feature Items
Props
DropdownMenu
"menu" | "sheet"
default:"menu"
How the menu presents its content.
DropdownMenuCheckboxItem
boolean
ReactNode
Leading avatar rendered between the checkbox and the title. Render at 32px to match the design.
string
Optional secondary text shown below the title.
DropdownMenuContent
boolean
DropdownMenuGroup
boolean
DropdownMenuHeader
ReactNode
Action elements rendered at the end of the header row, before the close button — e.g. icon buttons for search/add, or a primary “Done” button that commits a
DropdownMenuReorderGroup reorder. An action that should close the menu needs the menu’s open state controlled (only the built-in close button can dismiss an uncontrolled menu).string
default:"Back"
Accessible label for the back button.
string
default:"Close menu"
Accessible label for the close button.
(() => void)
Fires when the back icon button at the start of the row is activated. Rendering it lets a menu step back from a sub-view — a
type="search" header returning to its title, for instance — without closing the menu.(() => void)
Fires when the close icon button is activated.
DropdownMenuHeaderSearchProps
Configuration for the embedded search input when
type="search".boolean
default:"onBack !== undefined"
Whether to render the back icon button.
boolean
default:"true"
Whether to render the close icon button on the right.
"32" | "40"
default:"40"
Height preset for the header row.
string
Title text shown when
type="default". Ignored if children is provided."search" | "default"
default:"default"
Visual type.
"default" shows a title; "search" shows a search input.DropdownMenuItem
boolean
ReactNode
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.ReactNode
Trailing count or number (e.g. an unread total) rendered before
DropdownMenuItemProps.trailingIcon.ReactNode
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.
boolean
default:"false"
Applies the destructive (error) treatment. Use for irreversible actions.
ReactNode
Icon (or other node) rendered before the label. Ignored when
DropdownMenuItemProps.avatar is set.boolean
default:"false"
Marks the item as the current selection in a single-select menu.
"32" | "40" | "md" | "sm"
default:"40"
Height of the menu item row.
ReactNode
Icon (or other node) rendered after the label.
DropdownMenuLabel
boolean
"default" | "top"
default:"default"
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
boolean
DropdownMenuRadioItem
boolean
string
Optional secondary text shown below the title.
"40"
default:"40"
Height of the item row.
DropdownMenuReorderGroup
(values: string[], detail: DropdownMenuReorderDetail) => void
required
Fires after a drop or a keyboard move completes with the new order, plus which item moved and from/to where — enough to call a move-to-position API without diffing the arrays.
string[]
required
Item values in their current order. Must contain one entry per
DropdownMenuReorderItem child, in the same order the children are rendered.((detail: DropdownMenuReorderDetail) => string)
Builds the text announced to screen readers after a move. Override to localise it.
string
Screen-reader instructions attached to every drag handle. Override to localise them.
DropdownMenuReorderItem
string
required
Value identifying this item within the parent group’s
values.boolean
default:"false"
Disables dragging and keyboard reordering for this item.
string
default:"Reorder"
Accessible label for the drag handle button.
string
Plain-text name used in the group’s screen-reader announcements and reported in
onReorder’s detail. Defaults to children when that is a string or number, then to value — so pass it whenever value is an id.ReactNode
Icon (or other node) rendered between the drag handle and the label.
ReactNode
Content rendered at the end of the row, e.g. an item count.
DropdownMenuSeparator
boolean
DropdownMenuTrigger
boolean
Exported types
Also exported from@fanvue/ui: DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuHeaderSearchProps, DropdownMenuHeaderSize, DropdownMenuHeaderType, DropdownMenuItemProps, DropdownMenuItemSize, DropdownMenuLabelPosition, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuRadioItemSize, DropdownMenuReorderDetail, DropdownMenuReorderGroupProps, DropdownMenuReorderItemProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps, DropdownMenuVariant.
Setup: Installation · Theming