Components

Menubar

Displays a list of menus that can be used to control the application.

Structure

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

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

Component API

Root

The root menubar component which manages & scopes the state of the menubar.

Prop	Default	Type/Description
`closeOnEscape`	`true`	`boolean` Whether to close the open menubar menu when the escape key is pressed.
`loop`	`true`	`boolean` Whether or not to loop through the menubar menu triggers when navigating with the keyboard.

Prop	Default	Type/Description
`preventScroll`	`true`	`boolean` Whether or not to prevent scroll on the body when the menu is open.
`closeOnEscape`	`true`	`boolean` Whether to close the menu when the escape key is pressed.
`closeOnOutsideClick`	`true`	`boolean` Whether to close the 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 menu.
`onOpenChange`	-	`(open: boolean) => void` A callback that is fired when the menu's open state changes.
`positioning`	-	`FloatingConfig` The positioning configuration for the menu. (docs coming soon)

Trigger

The button element which toggles the 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 menu's open state.

Content

The content displayed when the 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 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.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the 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 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 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 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 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 🚧