Dropdown Menu

An overlay component that displays a contextual menu of choices when triggered by a button.
For more information on this component configuration, visit Radix UI

Disabled Item

Use the disabled attr or the disabled class to disable an item component.

Sizes

Use the dropdown-menu-content-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-dropdown-menu-max-w-sm: var(--container-3xs);
  --ex-dropdown-menu-max-w-md: var(--container-2xs);
 
  --ex-dropdown-menu-radius-sm: var(--radius-sm);
  --ex-dropdown-menu-radius-md: var(--radius-sm);
 
  --ex-dropdown-menu-shadow-sm: var(--shadow-sm);
  --ex-dropdown-menu-shadow-md: var(--shadow-sm);
 
  --ex-dropdown-menu-section-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-dropdown-menu-section-gap-x-md: calc(var(--spacing) * 2);
 
  --ex-dropdown-menu-section-px-sm: calc(var(--spacing) * 1.5);
  --ex-dropdown-menu-section-px-md: calc(var(--spacing) * 2);
 
  --ex-dropdown-menu-section-py-sm: calc(var(--spacing) * 2);
  --ex-dropdown-menu-section-py-md: calc(var(--spacing) * 2.5);
 
  --ex-dropdown-menu-item-px-sm: calc(var(--spacing) * 2);
  --ex-dropdown-menu-item-px-md: calc(var(--spacing) * 2);
 
  --ex-dropdown-menu-item-py-sm: var(--spacing);
  --ex-dropdown-menu-item-py-md: var(--spacing);
 
  --ex-dropdown-menu-item-font-family: var(--font-sans);
  --ex-dropdown-menu-item-font-weight: var(--font-weight-normal);
 
  --ex-dropdown-menu-item-font-size-sm: var(--text-xs);
  --ex-dropdown-menu-item-font-size-md: var(--text-sm);
 
  --ex-dropdown-menu-item-indicator-font-size-sm: var(--text-xs);
  --ex-dropdown-menu-item-indicator-font-size-md: var(--text-sm);
 
  --ex-dropdown-menu-label-font-family: var(--font-sans);
  --ex-dropdown-menu-label-font-weight: var(--font-weight-normal);
  --ex-dropdown-menu-label-opacity: var(--ex-options-opacity-muted);
 
  --ex-dropdown-menu-label-font-size-sm: var(--text-2xs);
  --ex-dropdown-menu-label-font-size-md: var(--text-xs);
 
  --ex-dropdown-menu-command-font-family: var(--font-sans);
  --ex-dropdown-menu-command-font-weight: var(--font-weight-normal);
  --ex-dropdown-menu-command-opacity: var(--ex-options-opacity-muted);
 
  --ex-dropdown-menu-command-font-size-sm: var(--text-2xs);
  --ex-dropdown-menu-command-font-size-md: var(--text-xs);
 
  --ex-dropdown-menu-arrow-height-sm: calc(var(--spacing) * 1.75);
  --ex-dropdown-menu-arrow-height-md: calc(var(--spacing) * 1.75);
 
  --ex-dropdown-menu-arrow-width-sm: calc(var(--spacing) * 3.5);
  --ex-dropdown-menu-arrow-width-md: calc(var(--spacing) * 3.5);
}

API

For more information on this component configuration, visit Radix UI

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`modal`	`boolean`	`true`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Element	Selector
`DropdownMenu.Trigger`	`.ex-dropdown-menu-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`DropdownMenu.Content`	`.ex-dropdown-menu-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`center`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onCloseAutoFocus`	`function`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Element	Selector
`ContextMenu.Section`	`.ex-dropdown-menu-body`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`DropdownMenu.Arrow`	`.ex-dropdown-menu-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Element	Selector
`DropdownMenu.Item`	`.ex-dropdown-menu-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onSelect`	`function`

Element	Selector
`DropdownMenu.ItemIndicator`	`.ex-dropdown-menu-item-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`true`

Element	Selector
`DropdownMenu.Label`	`.ex-dropdown-menu-label`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`DropdownMenu.Command`	`.ex-dropdown-menu-command`

Prop	Type	Default
`as`	`ElementType`	`kbd`
`asChild`	`boolean`	`false`

Element	Selector
`DropdownMenu.Separator`	`.ex-dropdown-menu-separator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`DropdownMenu.RadioGroup`	`.ex-dropdown-menu-radio-group`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Element	Selector
`DropdownMenu.RadioItem`	`.ex-dropdown-menu-radio-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`value`	`string`
`onSelect`	`function`

Element	Selector
`DropdownMenu.CheckboxItem`	`.ex-dropdown-menu-checkbox-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onCheckedChange`	`function`
`onSelect`	`function`

Element	Selector
`DropdownMenu.Sub`	`.ex-dropdown-menu-sub`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Element	Selector
`DropdownMenu.SubTrigger`	`.ex-dropdown-menu-sub-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`

Element	Selector
`DropdownMenu.SubContent`	`.ex-dropdown-menu-sub-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`alignOffset`	`number`	`-8`
`arrowPadding`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Dropdown Menu

Disabled Item

Sizes

Customizing

API

Dropdown Menu

Dropdown Menu Trigger

Dropdown Menu Portal

Dropdown Menu Content

Dropdown Menu Section

Dropdown Menu Arrow

Dropdown Menu Item

Dropdown Menu Indicator

Dropdown Menu Label

Dropdown Menu Command

Dropdown Menu Separator

Dropdown Menu RadioGroup

Dropdown Menu RadioItem

Dropdown Menu CheckboxItem

Dropdown Sub

Dropdown Sub Trigger

Dropdown Sub Content