Menubar

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

	<script lang="ts">
  import * as Menubar from "@/components//ui/menubar";
 
  let bookmarks = false;
  let fullUrls = true;
 
  const profileRadioValue = "benoit";
</script>
 
<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>New Tab</Menubar.Item>
      <Menubar.Item>New Window</Menubar.Item>
      <Menubar.Item>New Incognito Window</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>Share</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>Email link</Menubar.Item>
          <Menubar.Item>Messages</Menubar.Item>
          <Menubar.Item>Notes</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>Print...</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>Edit</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>Undo</Menubar.Item>
      <Menubar.Item>Redo</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>Find</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>Search the web</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item>Find...</Menubar.Item>
          <Menubar.Item>Find Next</Menubar.Item>
          <Menubar.Item>Find Previous</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>Cut</Menubar.Item>
      <Menubar.Item>Copy</Menubar.Item>
      <Menubar.Item>Paste</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>View</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.CheckboxItem bind:checked={bookmarks}
        >Always Show Bookmarks Bar</Menubar.CheckboxItem
      >
      <Menubar.CheckboxItem bind:checked={fullUrls}
        >Always Show Full URLs</Menubar.CheckboxItem
      >
      <Menubar.Separator />
      <Menubar.Item inset>Reload</Menubar.Item>
      <Menubar.Item inset>Force Reload</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Hide Sidebar</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>Profiles</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.RadioGroup value={profileRadioValue}>
        <Menubar.RadioItem value="andy"
          >Andy</Menubar.RadioItem
        >
        <Menubar.RadioItem value="benoit"
          >Benoit</Menubar.RadioItem
        >
        <Menubar.RadioItem value="Luis"
          >Luis</Menubar.RadioItem
        >
      </Menubar.RadioGroup>
      <Menubar.Separator />
      <Menubar.Item inset>Edit...</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Add Profile...</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

	<script lang="ts">
  import * as Menubar from "@/components//ui/menubar";
 
  let bookmarks = false;
  let fullUrls = true;
 
  const profileRadioValue = "benoit";
</script>
 
<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>New Tab</Menubar.Item>
      <Menubar.Item>New Window</Menubar.Item>
      <Menubar.Item>New Incognito Window</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>Share</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>Email link</Menubar.Item>
          <Menubar.Item>Messages</Menubar.Item>
          <Menubar.Item>Notes</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>Print...</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>Edit</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>Undo</Menubar.Item>
      <Menubar.Item>Redo</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>Find</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>Search the web</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item>Find...</Menubar.Item>
          <Menubar.Item>Find Next</Menubar.Item>
          <Menubar.Item>Find Previous</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>Cut</Menubar.Item>
      <Menubar.Item>Copy</Menubar.Item>
      <Menubar.Item>Paste</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>View</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.CheckboxItem bind:checked={bookmarks}
        >Always Show Bookmarks Bar</Menubar.CheckboxItem
      >
      <Menubar.CheckboxItem bind:checked={fullUrls}
        >Always Show Full URLs</Menubar.CheckboxItem
      >
      <Menubar.Separator />
      <Menubar.Item inset>Reload</Menubar.Item>
      <Menubar.Item inset>Force Reload</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Hide Sidebar</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>Profiles</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.RadioGroup value={profileRadioValue}>
        <Menubar.RadioItem value="andy"
          >Andy</Menubar.RadioItem
        >
        <Menubar.RadioItem value="benoit"
          >Benoit</Menubar.RadioItem
        >
        <Menubar.RadioItem value="Luis"
          >Luis</Menubar.RadioItem
        >
      </Menubar.RadioGroup>
      <Menubar.Separator />
      <Menubar.Item inset>Edit...</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>Add Profile...</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

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

Menubar.Root

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

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

Menubar.Menu

A menu within the menubar.

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

Menubar.Trigger

The button element which toggles the menu.

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

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

Menubar.Content

The content displayed when the 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	Value/Description
`data-state`	The collapsible's open state. `Value: 'open' \| 'closed'`

Menubar.Item

A menu item within the 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`

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

Menubar.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	Value/Description
`data-orientation`	The orientation of the checkbox menu item. `Value: 'horizontal' \| 'vertical'`

Menubar.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.

Menubar.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`

Menubar.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`

Menubar.RadioIndicator

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

Menubar.Separator

A horizontal line to visually separate menu items.

Menubar.Arrow

An optional arrow which points to the 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	Value/Description
`data-arrow`	Present on the arrow elements of the menu. `Value: ''`

Menubar.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.

Menubar.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.

Menubar.Sub

A submenu belonging to the parent 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 menu. (docs coming soon) `Default: undefined`

Menubar.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	Value/Description
`data-state`	The submenu's open state. `Value: 'open' \| 'closed'`
`data-disabled`	Present when the submenu trigger is disabled. `Value: ''`

Menubar.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	Value/Description
`data-state`	The submenu's open state. `Value: 'open' \| 'closed'`

🚧 UNDER CONSTRUCTION 🚧