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

Root

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

Prop	Default	Type/Description
`preventScroll`	`true`	`boolean` Whether or not to prevent scroll on the body when the dropdown menu is open.
`closeOnEscape`	`true`	`boolean` Whether to close the dropdown menu when the escape key is pressed.
`closeOnOutsideClick`	`true`	`boolean` Whether to close the dropdown menu when a click occurs outside of it.
`loop`	`false`	`boolean` Whether or not to loop through the menu items when navigating with the keyboard.
`open`	`false`	`boolean` The open state of the dropdown menu.
`onOpenChange`	-	`(open: boolean) => void` A callback that is fired when the dropdown menu's open state changes.
`positioning`	-	`FloatingConfig` The positioning configuration for the dropdown menu. (docs coming soon)

Trigger

The button element which toggles the dropdown menu.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The dropdown menu's open state.

Content

The content displayed when the dropdown menu is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`transition`	-	`(node: Element, params?: any) => TransitionConfig` A Svelte transition function to use when transitioning the content in and out.
`transitionConfig`	-	`TransitionConfig` The Svelte `TransitionConfig` object to apply to the transition.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The collapsible's open state.

Item

A menu item within the dropdown menu.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the menu item is disabled.
`href`	-	`string` An optional prop that when passed converts the button into an anchor tag.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the dropdown menu item.
`data-highlighted`	`''` Present when the menu item is highlighted.

CheckboxItem

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.
`checked`	`false`	`boolean \| 'indeterminate'` The checkbox menu item's checked state.
`onCheckedChange`	-	`(checked: boolean \| 'indeterminate') => void` A callback that is fired when the checkbox menu item's checked state changes.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the checkbox menu item.

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.

RadioGroup

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`value`	-	`string` The value of the currently checked radio menu item.
`onValueChange`	-	`(value: string) => void` A callback that is fired when the radio group's value changes.

RadioItem

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`value`	-	`string` The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value.
`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.

RadioIndicator

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

Separator

A horizontal line to visually separate menu items.

Arrow

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`size`	`8`	`number` The height and width of the arrow in pixels.

Data Attribute	Value/Description
`data-arrow`	`''` Present on the arrow elements of the dropdown menu.

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.

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.

Sub

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

Prop	Default	Type/Description
`disabled`	-	`boolean` Whether or not the submenu is disabled.
`arrowSize`	`8`	`number` The size of the optional submenu arrow component in pixels.
`positioning`	-	`FloatingConfig` The positioning configuration for the dropdown menu. (docs coming soon)

SubTrigger

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

Prop	Default	Type/Description
`disabled`	`false`	`boolean` Whether or not the submenu trigger is disabled.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The submenu's open state.
`data-disabled`	`''` Present when the submenu trigger is disabled.

SubContent

The submenu content displayed when the parent submenu is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`transition`	-	`(node: Element, params?: any) => TransitionConfig` A Svelte transition function to use when transitioning the content in and out.
`transitionConfig`	-	`TransitionConfig` The Svelte `TransitionConfig` object to apply to the transition.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The submenu's open state.

🚧 UNDER CONSTRUCTION 🚧