bits
Report an issue

Dropdown Menu

Displays a menu to the user, which can consist of links or functions, triggered by a button.

Structure

	<script lang="ts">
  import { DropdownMenu } from "bits-ui";
</script>
 
<DropdownMenu.Root>
  <DropdownMenu.Trigger />
 
  <DropdownMenu.Content>
    <DropdownMenu.Label />
    <DropdownMenu.Item />
 
    <DropdownMenu.Group>
      <DropdownMenu.Item />
    </DropdownMenu.Group>
 
    <DropdownMenu.CheckboxItem>
      <DropdownMenu.CheckboxIndicator />
    </DropdownMenu.CheckboxItem>
 
    <DropdownMenu.RadioGroup>
      <DropdownMenu.RadioItem>
        <DropdownMenu.RadioIndicator />
      </DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
 
    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger />
      <DropdownMenu.SubContent />
    </DropdownMenu.Sub>
 
    <DropdownMenu.Separator />
    <DropdownMenu.Arrow />
  </DropdownMenu.Content>
</DropdownMenu.Root>

	<script lang="ts">
  import { DropdownMenu } from "bits-ui";
</script>
 
<DropdownMenu.Root>
  <DropdownMenu.Trigger />
 
  <DropdownMenu.Content>
    <DropdownMenu.Label />
    <DropdownMenu.Item />
 
    <DropdownMenu.Group>
      <DropdownMenu.Item />
    </DropdownMenu.Group>
 
    <DropdownMenu.CheckboxItem>
      <DropdownMenu.CheckboxIndicator />
    </DropdownMenu.CheckboxItem>
 
    <DropdownMenu.RadioGroup>
      <DropdownMenu.RadioItem>
        <DropdownMenu.RadioIndicator />
      </DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
 
    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger />
      <DropdownMenu.SubContent />
    </DropdownMenu.Sub>
 
    <DropdownMenu.Separator />
    <DropdownMenu.Arrow />
  </DropdownMenu.Content>
</DropdownMenu.Root>

Component API

DropdownMenu.Root

The root component which manages & scopes the state of the dropdown menu.

Property Type Description
preventScroll
boolean

Whether or not to prevent scroll on the body when the dropdown menu is open.

Default: true
closeOnEscape
boolean

Whether to close the dropdown menu when the escape key is pressed.

Default: true
closeOnOutsideClick
boolean

Whether to close the dropdown menu when a click occurs outside of it.

Default: true
loop
boolean

Whether or not to loop through the menu items when navigating with the keyboard.

Default: false
open
boolean

The open state of the dropdown menu.

Default: false
onOpenChange
(open: boolean) => void

A callback that is fired when the dropdown menu's open state changes.

Default:  —— undefined
positioning
FloatingConfig

The positioning configuration for the dropdown menu. (docs coming soon)

Default:  —— undefined

DropdownMenu.Trigger

The button element which toggles the dropdown menu.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
Data Attribute Description/Value
data-state

The dropdown menu's open state.

Value: 'open' | 'closed'

DropdownMenu.Content

The content displayed when the dropdown menu is open.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
transition
(node: Element, params?: any) => TransitionConfig

A Svelte transition function to use when transitioning the content in and out.

Default:  —— undefined
transitionConfig
TransitionConfig

The Svelte TransitionConfig object to apply to the transition.

Default:  —— undefined
Data Attribute Description/Value
data-state

The collapsible's open state.

Value: 'open' | 'closed'

DropdownMenu.Item

A menu item within the dropdown menu.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
disabled
boolean

Whether or not the menu item is disabled.

Default: false
href
string

An optional prop that when passed converts the dropdown item into an anchor tag.

Default:  —— undefined
Data Attribute Description/Value
data-orientation

The orientation of the dropdown menu item.

Value: 'horizontal' | 'vertical'
data-highlighted

Present when the menu item is highlighted.

Value: ''

DropdownMenu.CheckboxItem

A menu item that can be controlled and toggled like a checkbox.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
disabled
boolean

Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

Default: false
checked
boolean | 'indeterminate'

The checkbox menu item's checked state.

Default: false
onCheckedChange
(checked: boolean | 'indeterminate') => void

A callback that is fired when the checkbox menu item's checked state changes.

Default:  —— undefined
Data Attribute Description/Value
data-orientation

The orientation of the checkbox menu item.

Value: 'horizontal' | 'vertical'

DropdownMenu.CheckboxIndicator

A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.

DropdownMenu.RadioGroup

A group of radio menu items, where only one can be checked at a time.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
value
string

The value of the currently checked radio menu item.

Default:  —— undefined
onValueChange
(value: string) => void

A callback that is fired when the radio group's value changes.

Default:  —— undefined

DropdownMenu.RadioItem

A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
value
string

The value of the radio item. When checked, the parent RadioGroup's value will be set to this value.

Default:  —— undefined
disabled
false

Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

Default:  —— undefined

DropdownMenu.RadioIndicator

A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked.

DropdownMenu.Separator

A horizontal line to visually separate menu items.

DropdownMenu.Arrow

An optional arrow which points to the dropdown menu's anchor/trigger point.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
size
number

The height and width of the arrow in pixels.

Default: 8
Data Attribute Description/Value
data-arrow

Present on the arrow elements of the dropdown menu.

Value: ''

DropdownMenu.Group

A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.

DropdownMenu.Label

A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group.

DropdownMenu.Sub

A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.

Property Type Description
disabled
boolean

Whether or not the submenu is disabled.

Default:  —— undefined
arrowSize
number

The size of the optional submenu arrow component in pixels.

Default: 8
positioning
FloatingConfig

The positioning configuration for the dropdown menu. (docs coming soon)

Default:  —— undefined

DropdownMenu.SubTrigger

A menu item which when pressed or hovered, opens the submenu.

Property Type Description
disabled
boolean

Whether or not the submenu trigger is disabled.

Default: false
Data Attribute Description/Value
data-state

The submenu's open state.

Value: 'open' | 'closed'
data-disabled

Present when the submenu trigger is disabled.

Value: ''

DropdownMenu.SubContent

The submenu content displayed when the parent submenu is open.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
transition
(node: Element, params?: any) => TransitionConfig

A Svelte transition function to use when transitioning the content in and out.

Default:  —— undefined
transitionConfig
TransitionConfig

The Svelte TransitionConfig object to apply to the transition.

Default:  —— undefined
Data Attribute Description/Value
data-state

The submenu's open state.

Value: 'open' | 'closed'

🚧 UNDER CONSTRUCTION 🚧