DropdownMenu

Storybook

Go to Story

DropdownMenu

const DropdownMenu: FC<DropdownMenuProps> = DropdownMenuPrimitive.Root;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:20

Root container for DropdownMenu components. Controls the open state of the dropdown menu.

Built on top of Radix UI Dropdown.

---

DropdownMenuTrigger

const DropdownMenuTrigger: ForwardRefExoticComponent<DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>> = DropdownMenuPrimitive.Trigger;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:34

Element that toggles the dropdown menu. Must be wrapped in the DropdownMenu component.

Example

// renders Button as trigger
<DropdownMenuTrigger asChild>
  <Button variant="outline">Trigger</Button>
</DropdownMenuTrigger>

---

DropdownMenuGroup

const DropdownMenuGroup: ForwardRefExoticComponent<DropdownMenuGroupProps & RefAttributes<HTMLDivElement>> = DropdownMenuPrimitive.Group;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:40

Groups multiple menu items together. Useful for organizing related menu options.

---

DropdownMenuPortal

const DropdownMenuPortal: FC<DropdownMenuPortalProps> = DropdownMenuPrimitive.Portal;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:46

Portal for rendering dropdown content outside its parent hierarchy. Prevents layout issues in complex UIs.

---

DropdownMenuSub

const DropdownMenuSub: FC<DropdownMenuSubProps> = DropdownMenuPrimitive.Sub;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:52

Creates a submenu within a dropdown menu. Useful for nested navigation structures.

---

DropdownMenuRadioGroup

const DropdownMenuRadioGroup: ForwardRefExoticComponent<DropdownMenuRadioGroupProps & RefAttributes<HTMLDivElement>> = DropdownMenuPrimitive.RadioGroup;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:58

Container for radio items in a dropdown menu. Allows for mutually exclusive selection of options.

---

DropdownMenuSubTrigger()

function DropdownMenuSubTrigger(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:64

Trigger element for a submenu within a dropdown. Displays a chevron icon to indicate nested content.

Parameters

Parameter	Type
__namedParameters	DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement> & object

Returns

Element

---

DropdownMenuSubContent()

function DropdownMenuSubContent(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:88

Content container for submenu items.

Parameters

Parameter	Type
__namedParameters	DropdownMenuSubContentProps & RefAttributes<HTMLDivElement>

Returns

Element

---

DropdownMenuContent()

function DropdownMenuContent(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:132

Displays the main content of a dropdown menu.

Parameters

Parameter	Type
__namedParameters	DropdownMenuContentProps

Returns

Element

Examples

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

// Render inline without portal
<DropdownMenuContent container={null}>
  <DropdownMenuItem>Item</DropdownMenuItem>
</DropdownMenuContent>

---

DropdownMenuItem()

function DropdownMenuItem(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:177

Standard menu item for dropdown menus. Renders a selectable option.

Parameters

Parameter	Type
__namedParameters	DropdownMenuItemProps & RefAttributes<HTMLDivElement> & object

Returns

Element

Examples

<DropdownMenuItem onClick={() => signOut()}>
  <LogOut />
  Sign out
</DropdownMenuItem>

// as link
<DropdownMenuItem asChild>
  <Link href="/account">
    Account
  </Link>
</DropdownMenuItem>

---

DropdownMenuCheckboxItem()

function DropdownMenuCheckboxItem(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:210

Checkbox menu item for dropdown menus. Displays a checkmark when selected. Supports three states: checked, unchecked, and indeterminate.

Parameters

Parameter	Type
__namedParameters	DropdownMenuCheckboxItemProps & RefAttributes<HTMLDivElement>

Returns

Element

Example

<DropdownMenu>
  <DropdownMenuContent>
    <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setIsChecked}>
      Show notifications
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>

---

DropdownMenuRadioItem()

function DropdownMenuRadioItem(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:245

Radio menu item for dropdown menus. Displays a filled circle when selected. Must be used inside a DropdownMenuRadioGroup.

Parameters

Parameter	Type
__namedParameters	DropdownMenuRadioItemProps & RefAttributes<HTMLDivElement>

Returns

Element

Example

<DropdownMenuRadioGroup value={value} onValueChange={setValue}>
  <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
  <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>

---

DropdownMenuLabel()

function DropdownMenuLabel(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:287

Non-interactive label element for dropdown menus. Useful for creating section headers or group titles within the menu.

Parameters

Parameter	Type
__namedParameters	DropdownMenuLabelProps

Returns

Element

Example

<DropdownMenu>
  <DropdownMenuContent>
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

---

DropdownMenuSeparator()

function DropdownMenuSeparator(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:317

Visual separator line for dropdown menus. Creates a horizontal rule to divide sections within the menu.

Parameters

Parameter	Type
__namedParameters	DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>

Returns

Element

Example

<DropdownMenu>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

---

DropdownMenuShortcut()

function DropdownMenuShortcut(__namedParameters): Element;

Defined in: src/components/DropdownMenu/DropdownMenu.tsx:339

Displays keyboard shortcut hints in dropdown menu items. Renders with subtle styling to indicate keyboard commands without overwhelming the UI.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>>

Returns

Element

Example

<DropdownMenuItem>
  New File
  <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>