Skip to content
Caps0.4.0
API reference

components/dropdown-menu

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/dropdown-menu";

Exports

Section titled “Exports”
Kind Export Description
type alias DropdownMenuChangeDetails Details supplied to a DropdownMenu open-change callback.
type alias DropdownMenuChangeReason Supported DropdownMenuChangeReason values.
type alias DropdownMenuInteractionOwner Supported DropdownMenuInteractionOwner values.
type alias DropdownMenuProps Props accepted by DropdownMenu.
type alias DropdownMenuContentProps Props accepted by DropdownMenuContent.
type alias DropdownMenuItemProps Props accepted by DropdownMenuItem.
type alias DropdownMenuCheckboxItemProps Props accepted by DropdownMenuCheckboxItem.
constant DropdownMenuTrigger The trigger control for a DropdownMenu.
constant DropdownMenuPortal Shell popover destination, with Base UI container and mount lifetime overrides.
constant DropdownMenuPositioner Base UI owns placement; a shell’s popover root supplies its collision boundary.
constant DropdownMenuPopup The styled popup for caller-composed menu placement and portal ownership.
constant DropdownMenuContent The positioned content region for a DropdownMenu.
constant DropdownMenuItem An actionable item in a DropdownMenu.
constant DropdownMenuCheckboxItem A checkable item in a DropdownMenu.
constant DropdownMenuSeparator A visual separator in a DropdownMenu.
constant DropdownMenuGroup A named set of related items; pair it with a DropdownMenuLabel.
constant DropdownMenuLabel The visible name of a DropdownMenuGroup, announced with its items.
function DropdownMenu() A menu controller with explicit controlled or uncontrolled open state.
function useDropdownMenu() Access the nearest DropdownMenu close operation.
Section titled “DropdownMenuChangeDetails”
Signature
type DropdownMenuChangeDetails = BaseMenu.Root.ChangeEventDetails;

Details supplied to a DropdownMenu open-change callback.

Section titled “DropdownMenuChangeReason”
Signature
type DropdownMenuChangeReason = BaseMenu.Root.ChangeEventReason;

Supported DropdownMenuChangeReason values.

Section titled “DropdownMenuInteractionOwner”
Signature
type DropdownMenuInteractionOwner = "host" | "local";

Supported DropdownMenuInteractionOwner values.

Section titled “DropdownMenuProps”
Signature
type DropdownMenuProps<Payload> = BaseMenu.Root.Props<Payload> & object;

Props accepted by DropdownMenu.

Type Declaration

Section titled “Type Declaration”
Name Type
interactionOwner? DropdownMenuInteractionOwner

Type Parameters

Section titled “Type Parameters”
Type Parameter Default type
Payload unknown
Section titled “DropdownMenuContentProps”
Signature
type DropdownMenuContentProps = BaseMenu.Popup.Props &
  Pick<BaseMenu.Portal.Props, "container" | "keepMounted"> &
  Pick<
    BaseMenu.Positioner.Props,
    "align" | "alignOffset" | "side" | "sideOffset"
  >;

Props accepted by DropdownMenuContent.

Section titled “DropdownMenuItemProps”
Signature
type DropdownMenuItemProps = Omit<BaseMenu.Item.Props, "onSelect"> & object;

Props accepted by DropdownMenuItem.

Type Declaration

Section titled “Type Declaration”
Name Type Description
onSelect()? (event) => void Called when this item is selected.
variant? "default" | "destructive" -
Section titled “DropdownMenuCheckboxItemProps”
Signature
type DropdownMenuCheckboxItemProps = Omit<
  BaseMenu.CheckboxItem.Props,
  "onSelect"
> &
  Pick<DropdownMenuItemProps, "onSelect">;

Props accepted by DropdownMenuCheckboxItem.

Section titled “DropdownMenuTrigger”
Signature
const DropdownMenuTrigger: ForwardRefExoticComponent<
  Omit<Props<unknown>, "ref"> & RefAttributes<HTMLButtonElement>
>;

The trigger control for a DropdownMenu.

Section titled “DropdownMenuPortal”
Signature
const DropdownMenuPortal: ForwardRefExoticComponent<
  Omit<MenuPortalProps, "ref"> & RefAttributes<HTMLDivElement>
>;

Shell popover destination, with Base UI container and mount lifetime overrides.

Section titled “DropdownMenuPositioner”
Signature
const DropdownMenuPositioner: ForwardRefExoticComponent<
  Omit<MenuPositionerProps, "ref"> & RefAttributes<HTMLDivElement>
>;

Base UI owns placement; a shell’s popover root supplies its collision boundary.

Section titled “DropdownMenuPopup”
Signature
const DropdownMenuPopup: ForwardRefExoticComponent<
  Omit<MenuPopupProps, "ref"> & RefAttributes<HTMLDivElement>
>;

The styled popup for caller-composed menu placement and portal ownership.

Section titled “DropdownMenuContent”
Signature
const DropdownMenuContent: ForwardRefExoticComponent<
  Omit<DropdownMenuContentProps, "ref"> & RefAttributes<HTMLDivElement>
>;

The positioned content region for a DropdownMenu.

Section titled “DropdownMenuItem”
Signature
const DropdownMenuItem: ForwardRefExoticComponent<
  Omit<DropdownMenuItemProps, "ref"> & RefAttributes<HTMLElement>
>;

An actionable item in a DropdownMenu.

Section titled “DropdownMenuCheckboxItem”
Signature
const DropdownMenuCheckboxItem: ForwardRefExoticComponent<
  Omit<DropdownMenuCheckboxItemProps, "ref"> & RefAttributes<HTMLElement>
>;

A checkable item in a DropdownMenu.

Section titled “DropdownMenuSeparator”
Signature
const DropdownMenuSeparator: ForwardRefExoticComponent<
  Omit<SeparatorProps, "ref"> & RefAttributes<HTMLDivElement>
>;

A visual separator in a DropdownMenu.

Section titled “DropdownMenuGroup”
Signature
const DropdownMenuGroup: ForwardRefExoticComponent<
  Omit<MenuGroupProps, "ref"> & RefAttributes<HTMLDivElement>
> = BaseMenu.Group;

A named set of related items; pair it with a DropdownMenuLabel.

Section titled “DropdownMenuLabel”
Signature
const DropdownMenuLabel: ForwardRefExoticComponent<
  Omit<MenuGroupLabelProps, "ref"> & RefAttributes<HTMLDivElement>
>;

The visible name of a DropdownMenuGroup, announced with its items.

Section titled “DropdownMenu()”
Signature
function DropdownMenu<Payload>(__namedParameters): Element;

A menu controller with explicit controlled or uncontrolled open state.

Type Parameters

Section titled “Type Parameters”
Type Parameter Default type
Payload unknown

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters DropdownMenuProps<Payload>

Returns

Section titled “Returns”

Element

useDropdownMenu()function

Section titled “useDropdownMenu()”
Signature
function useDropdownMenu(): object;

Access the nearest DropdownMenu close operation.

Returns

Section titled “Returns”
Name Type Description
close() () => void | undefined Close the nearest menu, if it is mounted.