Fanvue API Documentation

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

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@fanvue/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Option 1</DropdownMenuItem>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
    <DropdownMenuItem>Option 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

As Child Link

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@fanvue/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem asChild>
      <a href="#settings">Settings</a>
    </DropdownMenuItem>
    <DropdownMenuItem asChild>
      <a href="#profile">Profile</a>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Icons

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  EditIcon,
  StarIcon,
} from "@fanvue/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>
    <DropdownMenuItem leadingIcon={<StarIcon />}>Favourite</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Size Matrix

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@fanvue/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-72">
    <DropdownMenuLabel position="top">Size 40</DropdownMenuLabel>
    <DropdownMenuItem size="40">Default</DropdownMenuItem>
    <DropdownMenuItem size="40" selected>
      Selected
    </DropdownMenuItem>
    <DropdownMenuItem size="40" disabled>
      Disabled
    </DropdownMenuItem>
    <DropdownMenuItem size="40" destructive>
      Error
    </DropdownMenuItem>
    <DropdownMenuLabel>Size 32</DropdownMenuLabel>
    <DropdownMenuItem size="32">Default</DropdownMenuItem>
    <DropdownMenuItem size="32" selected>
      Selected
    </DropdownMenuItem>
    <DropdownMenuItem size="32" disabled>
      Disabled
    </DropdownMenuItem>
    <DropdownMenuItem size="32" destructive>
      Error
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Feature Items

import {
  Avatar,
  Button,
  ChevronRightIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  EditIcon,
  StarIcon,
} from "@fanvue/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-80">
    <DropdownMenuItem
      avatar={<Avatar size={24} fallback="JD" />}
      trailingIcon={<ChevronRightIcon />}
    >
      Jane Doe
    </DropdownMenuItem>
    <DropdownMenuItem
      avatar={<Avatar size={24} fallback="AS" />}
      description="Product designer"
      count="12"
    >
      Alex Smith
    </DropdownMenuItem>
    <DropdownMenuItem leadingIcon={<StarIcon />} count="99+">
      Favourites
    </DropdownMenuItem>
    <DropdownMenuItem leadingIcon={<EditIcon />} description="Update your details">
      Edit profile
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

DropdownMenu

Root component that manages open/close state for a dropdown menu.

"menu" | "sheet"

default:"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.

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

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.

boolean

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.

string

default:"Close menu"

Accessible label for the close button.

(() => void)

Fires when the close icon button is activated.

DropdownMenuHeaderSearchProps

Configuration for the embedded search input when type="search".

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

An individual item within a DropdownMenuContent.

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. 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.

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

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.

boolean

string

Optional secondary text shown below the title.

"40"

default:"40"

Height of the item row.

DropdownMenuSeparator

Visual separator between groups of items.

boolean

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.

boolean

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 · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

DropdownMenu

Examples

Default

As Child Link

With Icons

Size Matrix

Feature Items

Props

DropdownMenu

DropdownMenuCheckboxItem

DropdownMenuContent

DropdownMenuGroup

DropdownMenuHeader

DropdownMenuItem

DropdownMenuLabel

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuSeparator

DropdownMenuTrigger

Exported types

​Examples

​Default

​As Child Link

​With Icons

​Size Matrix

​Feature Items

​Props

​DropdownMenu

​DropdownMenuCheckboxItem

​DropdownMenuContent

​DropdownMenuGroup

​DropdownMenuHeader

​DropdownMenuItem

​DropdownMenuLabel

​DropdownMenuRadioGroup

​DropdownMenuRadioItem

​DropdownMenuSeparator

​DropdownMenuTrigger

​Exported types

Examples

Default

As Child Link

With Icons

Size Matrix

Feature Items

Props

DropdownMenu

DropdownMenuCheckboxItem

DropdownMenuContent

DropdownMenuGroup

DropdownMenuHeader

DropdownMenuItem

DropdownMenuLabel

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuSeparator

DropdownMenuTrigger

Exported types