---
title: "Menubar"
description: "A visually persistent menu common in desktop applications that provides quick"
canonical_url: "https://vinicunca.dev/akar/components/menubar"
---
# Menubar

> A visually persistent menu common in desktop applications that provides quick

```vue [index.vue]
<script setup lang="ts">
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'akar'
import { ref } from 'vue'
import './styles.css'

const currentMenu = ref('')
const checkboxOne = ref(false)
const checkboxTwo = ref(false)
const person = ref('pedro')
function handleClick() {
  // eslint-disable-next-line no-alert
  alert('hello!')
}
</script>

<template>
  <div class="akar-demo akar-demo-Menubar">
    <MenubarRoot
        v-model="currentMenu"
        class="MenubarRoot"
      >
        <MenubarMenu value="file">
          <MenubarTrigger
            class="MenubarTrigger"
          >
            File
          </MenubarTrigger>
          <MenubarPortal>
            <MenubarContent
              class="MenubarContent"
              align="start"
              :side-offset="5"
              :align-offset="-3"
            >
              <MenubarItem
                class="MenubarItem"
              >
                New Tab
                <div class="RightSlot">
                  ⌘ T
                </div>
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
              >
                New Window
                <div class="RightSlot">
                  ⌘ N
                </div>
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
                disabled
              >
                New Incognito Window
              </MenubarItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarSub>
                <MenubarSubTrigger
                  class="MenubarItem"
                >
                  Share
                  <div
                    class="RightSlot"
                  >
                    <PIcon name="i-lucide-chevron-right" />
                  </div>
                </MenubarSubTrigger>
                <MenubarPortal>
                  <MenubarSubContent
                    class="MenubarContent"
                    :align-offset="-5"
                  >
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Email Link
                    </MenubarItem>
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Messages
                    </MenubarItem>
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Notes
                    </MenubarItem>
                  </MenubarSubContent>
                </MenubarPortal>
              </MenubarSub>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Print…
                <div class="RightSlot">
                  ⌘ P
                </div>
              </MenubarItem>
            </MenubarContent>
          </MenubarPortal>
        </MenubarMenu>

        <MenubarMenu>
          <MenubarTrigger
            class="MenubarTrigger"
          >
            Edit
          </MenubarTrigger>
          <MenubarPortal>
            <MenubarContent
              class="MenubarContent"
              align="start"
              :side-offset="5"
              :align-offset="-3"
            >
              <MenubarItem
                class="MenubarItem"
              >
                Undo
                <div class="RightSlot">
                  ⌘ Z
                </div>
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
              >
                Redo
                <div class="RightSlot">
                  ⇧ ⌘ Z
                </div>
              </MenubarItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarSub>
                <MenubarSubTrigger
                  class="MenubarItem"
                >
                  Find
                  <div
                    class="RightSlot"
                  >
                    <PIcon name="i-lucide-chevron-right" />
                  </div>
                </MenubarSubTrigger>

                <MenubarPortal>
                  <MenubarSubContent
                    class="MenubarContent"
                    :align-offset="-5"
                  >
                    <MenubarItem
                      class="group MenubarItem"
                    >
                      Search the web…
                    </MenubarItem>
                    <MenubarSeparator class="MenubarSeparator" />
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Find…
                    </MenubarItem>
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Find Next
                    </MenubarItem>
                    <MenubarItem
                      class="MenubarItem"
                    >
                      Find Previous
                    </MenubarItem>
                  </MenubarSubContent>
                </MenubarPortal>
              </MenubarSub>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Cut
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
              >
                Copy
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
              >
                Paste
              </MenubarItem>
            </MenubarContent>
          </MenubarPortal>
        </MenubarMenu>

        <MenubarMenu>
          <MenubarTrigger
            class="MenubarTrigger"
          >
            View
          </MenubarTrigger>
          <MenubarPortal>
            <MenubarContent
              class="MenubarContent"
              align="start"
              :side-offset="5"
              :align-offset="-14"
            >
              <MenubarCheckboxItem
                v-model="checkboxOne"
                class="MenubarCheckboxItem"
              >
                <MenubarItemIndicator class="MenubarItemIndicator">
                  <PIcon name="i-lucide-check" />
                </MenubarItemIndicator>
                Show Bookmarks
                <div
                  class="RightSlot"
                >
                  ⌘+B
                </div>
              </MenubarCheckboxItem>
              <MenubarCheckboxItem
                v-model="checkboxTwo"
                class="MenubarCheckboxItem"
              >
                <MenubarItemIndicator class="MenubarItemIndicator">
                  <PIcon name="i-lucide-check" />
                </MenubarItemIndicator>
                Show Full URLs
              </MenubarCheckboxItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Reload
                <div class="RightSlot">
                  ⌘ R
                </div>
              </MenubarItem>
              <MenubarItem
                class="MenubarItem"
                disabled
              >
                Force Reload
                <div class="RightSlot">
                  ⇧ ⌘ R
                </div>
              </MenubarItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Toggle Fullscreen
              </MenubarItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Hide Sidebar
              </MenubarItem>
            </MenubarContent>
          </MenubarPortal>
        </MenubarMenu>

        <MenubarMenu>
          <MenubarTrigger
            class="MenubarTrigger"
          >
            Profiles
          </MenubarTrigger>
          <MenubarPortal>
            <MenubarContent
              class="MenubarContent"
              align="start"
              :side-offset="5"
              :align-offset="-14"
            >
              <MenubarRadioGroup v-model="person">
                <MenubarRadioItem
                  class="MenubarCheckboxItem"
                  value="pedro"
                >
                  <MenubarItemIndicator class="MenubarItemIndicator">
                    <PIcon name="i-lucide-circle" />
                  </MenubarItemIndicator>
                  Pedro Duarte
                </MenubarRadioItem>
                <MenubarRadioItem
                  class="MenubarCheckboxItem"
                  value="colm"
                >
                  <MenubarItemIndicator class="MenubarItemIndicator">
                    <PIcon name="i-lucide-circle" />
                  </MenubarItemIndicator>
                  Colm Tuite
                </MenubarRadioItem>
              </MenubarRadioGroup>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
                @click="handleClick"
              >
                Edit…
              </MenubarItem>
              <MenubarSeparator class="MenubarSeparator" />
              <MenubarItem
                class="MenubarItem"
              >
                Add Profile…
              </MenubarItem>
            </MenubarContent>
          </MenubarPortal>
        </MenubarMenu>
      </MenubarRoot>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';
@import '../_colors/mauve.css';
@import '../_colors/grass.css';

@scope (.akar-demo-Menubar) {
/* reset */
button {
  all: unset;
}

.MenubarRoot {
  display: flex;
  background-color: white;
  padding: 3px;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--black-a7);
}

.MenubarTrigger {
  padding: 8px 12px;
  outline: none;
  user-select: none;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  color: var(--grass-11);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.MenubarTrigger[data-highlighted],
.MenubarTrigger[data-state='open'] {
  background-color: var(--grass-4);
}

.MenubarContent,
.MenubarSubContent {
  min-width: 220px;
  background-color: white;
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.MenubarItem,
.MenubarSubTrigger,
.MenubarCheckboxItem,
.MenubarRadioItem {
  all: unset;
  font-size: 13px;
  line-height: 1;
  color: var(--grass-11);
  border-radius: 4px;
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  position: relative;
  user-select: none;
}

.MenubarItem.inset,
.MenubarSubTrigger.inset,
.MenubarCheckboxItem.inset,
.MenubarRadioItem.inset {
  padding-left: 20px;
}

.MenubarItem[data-state='open'],
.MenubarSubTrigger[data-state='open'] {
  background-color: var(--grass-4);
  color: var(--grass-11);
}

.MenubarItem[data-highlighted],
.MenubarSubTrigger[data-highlighted],
.MenubarCheckboxItem[data-highlighted],
.MenubarRadioItem[data-highlighted] {
  background-image: linear-gradient(135deg, var(--grass-9) 0%, var(--grass-10) 100%);
  color: var(--grass-1);
}

.MenubarItem[data-disabled],
.MenubarSubTrigger[data-disabled],
.MenubarCheckboxItem[data-disabled],
.MenubarRadioItem[data-disabled] {
  color: var(--mauve-8);
  pointer-events: none;
}

.MenubarItemIndicator {
  position: absolute;
  left: 0;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.MenubarSeparator {
  height: 1px;
  background-color: var(--grass-6);
  margin: 5px;
}

.RightSlot {
  margin-left: auto;
  padding-left: 20px;
  color: var(--mauve-9);
}

[data-highlighted] > .RightSlot {
  color: white;
}

[data-disabled] > .RightSlot {
  color: var(--mauve-8);
}
}
```

## Features

- Can be controlled or uncontrolled.
- Supports submenus with configurable reading direction.
- Supports items, labels, groups of items.
- Supports checkable items (single or multiple).
- Customize side, alignment, offsets, collision handling.
- Optionally render a pointing arrow.
- Focus is fully managed.
- Full keyboard navigation.
- Typeahead support.

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import all parts and piece them together.

```vue
<script setup lang="ts">
import {
  MenubarArrow,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from './';
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger />
      <MenubarPortal>
        <MenubarContent>
          <MenubarLabel />
          <MenubarItem />

          <MenubarGroup>
            <MenubarItem />
          </MenubarGroup>

          <MenubarCheckboxItem>
            <MenubarItemIndicator />
          </MenubarCheckboxItem>

          <MenubarRadioGroup>
            <MenubarRadioItem>
              <MenubarItemIndicator />
            </MenubarRadioItem>
          </MenubarRadioGroup>

          <MenubarSub>
            <MenubarSubTrigger />
            <MenubarPortal>
              <MenubarSubContent />
            </MenubarPortal>
          </MenubarSub>

          <MenubarSeparator />
          <MenubarArrow />
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a menubar

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `defaultValue` |  | `string` | The value of the menu that should be open when initially rendered. Use when you do not need to control the value state. |
| `dir` |  | `"ltr" \| "rtl"` | The reading direction of the combobox when applicable.<br><br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
| `loop` | `false` | `boolean` | When `true`, keyboard navigation will loop from last item to first, and vice versa. |
| `modelValue` |  | `string` | The controlled value of the menu to open. Can be used as `v-model`. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `value: boolean` | Event handler called when the value changes. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `modelValue` | `string` | Current input values |

[MenubarRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarRoot.vue)

### Menu

A top level menu item, contains a trigger with content combination.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `value` |  | `string` | A unique value that associates the item with an active value when the navigation menu is controlled.<br><br>This prop is managed automatically when uncontrolled. |

[MenubarMenu.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarMenu.vue)

### Trigger

The button that toggles the content. By default, the `MenubarContent` will position itself against the trigger.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with item |

[MenubarTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarTrigger.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "open" \\| "closed" |
| `[data-highlighted]` | Present when highlighted |
| `[data-disabled]` | Present when disabled |

### Portal

When used, portals the content part into the `body`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `defer` |  | `boolean` | Defer the resolving of a Teleport target until other parts of the<br>application have mounted (requires Vue 3.5.0+)<br><br>[reference](https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport) |
| `disabled` |  | `boolean` | Disable teleport and render the component inline<br><br>[reference](https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport) |
| `forceMount` |  | `boolean` | Used to force mounting when more control is needed. Useful when<br>controlling animation with Vue animation libraries. |
| `to` |  | `string \| HTMLElement` | Vue native teleport component prop `:to`<br><br>[reference](https://vuejs.org/guide/built-ins/teleport.html#basic-usage) |

[MenubarPortal.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarPortal.vue)

### Content

The component that pops out when a menu is open.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `align` | `"start"` | `"start" \| "center" \| "end"` | The preferred alignment against the trigger.<br>May change when collisions occur. |
| `alignFlip` | `true` | `boolean` | Flip alignment when colliding with boundary.<br>May only occur when `prioritizePosition` is true. |
| `alignOffset` | `0` | `number` | An offset in pixels from the `start` or `end` alignment options. |
| `arrowPadding` | `0` | `number` | The padding between the arrow and the edges of the content.<br>If your content has border-radius, this will prevent it from<br>overflowing the corners. |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `avoidCollisions` | `true` | `boolean` | When `true`, overrides the side and align preferences<br>to prevent collisions with boundary edges. |
| `collisionBoundary` | `[]` | `Element \| (Element \| null)[] \| null` | The element used as the collision boundary. By default<br>this is the viewport, though you can provide additional<br>element(s) to be included in this check. |
| `collisionPadding` | `0` | `number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>` | The distance in pixels from the boundary edges where collision<br>detection should occur. Accepts a number (same for all sides),<br>or a partial padding object, for example: { top: 20, left: 20 }. |
| `disableUpdateOnLayoutShift` | `false` | `boolean` | Whether to disable the update position for the content when the layout shifted. |
| `forceMount` |  | `boolean` | Used to force mounting when more control is needed. Useful when<br>controlling animation with Vue animation libraries. |
| `hideShiftedArrow` | `true` | `boolean` | When `true`, hides the arrow when it cannot be centered<br>to the reference element. |
| `hideWhenDetached` | `false` | `boolean` | Whether to hide the content when the trigger becomes fully occluded. |
| `loop` | `false` | `boolean` | When `true`, keyboard navigation will loop from last item to first, and vice versa. |
| `memoDependencies` |  | `unknown[]` | Reactive dependencies that should invalidate the memoized content subtree. |
| `positionStrategy` |  | `"fixed" \| "absolute"` | The type of CSS position property to use. |
| `prioritizePosition` | `false` | `boolean` | Force content to be position within the viewport.<br><br>Might overlap the reference element, which may not be desired. |
| `reference` |  | `ReferenceElement` | The custom element or virtual element that will be set as the reference<br>to position the floating element.<br><br>If provided, it will replace the default anchor element. |
| `side` | `"bottom"` | `"top" \| "right" \| "bottom" \| "left"` | The preferred side of the trigger to render against when open.<br>Will be reversed when collisions occur and avoidCollisions<br>is enabled. |
| `sideFlip` | `true` | `boolean` | Flip to the opposite side when colliding with boundary. |
| `sideOffset` | `0` | `number` | The distance in pixels from the trigger. |
| `sticky` | `"partial"` | `"partial" \| "always"` | The sticky behavior on the align axis. `partial` will keep the<br>content in the boundary as long as the trigger is at least partially<br>in the boundary whilst "always" will keep the content in the boundary<br>regardless. |
| `updatePositionStrategy` | `'optimized'` | `"always" \| "optimized"` | Strategy to update the position of the floating element on every animation frame. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `closeAutoFocus` | `event: Event` | Event handler called when auto-focusing on close.<br>Can be prevented. |
| `escapeKeyDown` | `event: KeyboardEvent` | Event handler called when the escape key is down.<br>Can be prevented. |
| `focusOutside` | `event: FocusOutsideEvent` | Event handler called when the focus moves outside of the `DismissableLayer`.<br>Can be prevented. |
| `interactOutside` | `event: PointerDownOutsideEvent \| FocusOutsideEvent` | Event handler called when an interaction happens outside the `DismissableLayer`.<br>Specifically, when a `pointerdown` event happens outside or focus moves outside of it.<br>Can be prevented. |
| `openAutoFocus` | `event: Event` |  |
| `pointerDownOutside` | `event: PointerDownOutsideEvent` | Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.<br>Can be prevented. |

[MenubarContent.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarContent.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "open" \\| "closed" |
| `[data-side]` | "left" \\| "right" \\| "bottom" \\| "top" |
| `[data-align]` | "start" \\| "end" \\| "center" |

| CSS variable | Description |
| --- | --- |
| `--akar-menubar-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--akar-menubar-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--akar-menubar-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--akar-menubar-trigger-width` | The width of the trigger |
| `--akar-menubar-trigger-height` | The height of the trigger |

### Arrow

An optional arrow element to render alongside a menubar menu. This can be used to help visually link the trigger with the `MenubarContent`. Must be rendered inside `MenubarContent`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"svg"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `height` | `5` | `number` | The height of the arrow in pixels. |
| `rounded` | `false` | `boolean` | When `true`, render the rounded version of arrow. Do not work with `as`/`asChild` |
| `width` | `10` | `number` | The width of the arrow in pixels. |

[MenubarArrow.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarArrow.vue)

### Item

The component that contains the menubar items.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the item. |
| `textValue` |  | `string` | Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item.<br><br>Use this when the content is complex, or you have non-textual content inside. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `select` | `event: Event` | Event handler called when the user selects an item (via mouse or keyboard).<br><br>Calling `event.preventDefault` in this handler will prevent the menu from closing when selecting that item. |

[MenubarItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-highlighted]` | Present when highlighted |
| `[data-disabled]` | Present when disabled |

### Group

Used to group multiple `MenubarItem`s.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[MenubarGroup.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarGroup.vue)

### Label

Used to render a label. It won't be focusable using arrow keys.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[MenubarLabel.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarLabel.vue)

### CheckboxItem

An item that can be controlled and rendered like a checkbox.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the item. |
| `modelValue` |  | `false \| true \| "indeterminate"` | The controlled checked state of the item. Can be used as `v-model`. |
| `textValue` |  | `string` | Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item.<br><br>Use this when the content is complex, or you have non-textual content inside. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `select` | `event: Event` | Event handler called when the user selects an item (via mouse or keyboard).<br><br>Calling `event.preventDefault` in this handler will prevent the menu from closing when selecting that item. |
| `update:modelValue` | `payload: boolean` | Event handler called when the checked state changes. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `checked` | `false \| true \| "indeterminate"` | Current checked state |
| `modelValue` | `CheckedState` | Current modelValue state |

[MenubarCheckboxItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarCheckboxItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "checked" \\| "unchecked" |
| `[data-highlighted]` | Present when highlighted |
| `[data-disabled]` | Present when disabled |

### RadioGroup

Used to group multiple `MenubarRadioItem`s.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `modelValue` |  | `AcceptableValue` | The value of the selected item in the group. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `payload: AcceptableValue` | Event handler called when the value changes. |

[MenubarRadioGroup.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarRadioGroup.vue)

### RadioItem

An item that can be controlled and rendered like a radio.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the item. |
| `textValue` |  | `string` | Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item.<br><br>Use this when the content is complex, or you have non-textual content inside. |
| `value*` |  | `AcceptableValue` | The unique value of the item. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `select` | `event: Event` | Event handler called when the user selects an item (via mouse or keyboard).<br><br>Calling `event.preventDefault` in this handler will prevent the menu from closing when selecting that item. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `checked` | `boolean` | Current checked state |

[MenubarRadioItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarRadioItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "checked" \\| "unchecked" |
| `[data-highlighted]` | Present when highlighted |
| `[data-disabled]` | Present when disabled |

### ItemIndicator

Renders when the parent `MenubarCheckboxItem` or `MenubarRadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `forceMount` |  | `boolean` | Used to force mounting when more control is needed. Useful when<br>controlling animation with Vue animation libraries. |

[MenubarItemIndicator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarItemIndicator.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "checked" \\| "unchecked" |

### Separator

Used to visually separate items in a menubar menu.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[MenubarSeparator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarSeparator.vue)

### Sub

Contains all the parts of a submenu.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `defaultOpen` |  | `boolean` | The open state of the submenu when it is initially rendered. Use when you do not need to control its open state. |
| `open` |  | `boolean` | The controlled open state of the menu. Can be used as `v-model:open`. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:open` | `payload: boolean` | Event handler called when the open state of the submenu changes. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `open` | `boolean` | Current open state |

[MenubarSub.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarSub.vue)

### SubTrigger

An item that opens a submenu. Must be rendered inside `MenubarSub`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the item. |
| `graceDuration` | `300` | `number` | Time in milliseconds to keep a submenu open while the pointer moves from<br>its trigger to the submenu. |
| `textValue` |  | `string` | Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item.<br><br>Use this when the content is complex, or you have non-textual content inside. |

[MenubarSubTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarSubTrigger.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "open" \\| "closed" |
| `[data-highlighted]` | Present when highlighted |
| `[data-disabled]` | Present when disabled |

### SubContent

The component that pops out when a submenu is open. Must be rendered inside `MenubarSub`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `alignFlip` | `true` | `boolean` | Flip alignment when colliding with boundary.<br>May only occur when `prioritizePosition` is true. |
| `alignOffset` | `0` | `number` | An offset in pixels from the `start` or `end` alignment options. |
| `arrowPadding` | `0` | `number` | The padding between the arrow and the edges of the content.<br>If your content has border-radius, this will prevent it from<br>overflowing the corners. |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `avoidCollisions` | `true` | `boolean` | When `true`, overrides the side and align preferences<br>to prevent collisions with boundary edges. |
| `collisionBoundary` | `[]` | `Element \| (Element \| null)[] \| null` | The element used as the collision boundary. By default<br>this is the viewport, though you can provide additional<br>element(s) to be included in this check. |
| `collisionPadding` | `0` | `number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>` | The distance in pixels from the boundary edges where collision<br>detection should occur. Accepts a number (same for all sides),<br>or a partial padding object, for example: { top: 20, left: 20 }. |
| `disableUpdateOnLayoutShift` | `false` | `boolean` | Whether to disable the update position for the content when the layout shifted. |
| `forceMount` |  | `boolean` | Used to force mounting when more control is needed. Useful when<br>controlling animation with Vue animation libraries. |
| `hideShiftedArrow` | `true` | `boolean` | When `true`, hides the arrow when it cannot be centered<br>to the reference element. |
| `hideWhenDetached` | `false` | `boolean` | Whether to hide the content when the trigger becomes fully occluded. |
| `loop` | `false` | `boolean` | When `true`, keyboard navigation will loop from last item to first, and vice versa. |
| `memoDependencies` |  | `unknown[]` | Reactive dependencies that should invalidate the memoized content subtree. |
| `positionStrategy` |  | `"fixed" \| "absolute"` | The type of CSS position property to use. |
| `prioritizePosition` | `false` | `boolean` | Force content to be position within the viewport.<br><br>Might overlap the reference element, which may not be desired. |
| `reference` |  | `ReferenceElement` | The custom element or virtual element that will be set as the reference<br>to position the floating element.<br><br>If provided, it will replace the default anchor element. |
| `sideFlip` | `true` | `boolean` | Flip to the opposite side when colliding with boundary. |
| `sideOffset` | `0` | `number` | The distance in pixels from the trigger. |
| `sticky` | `"partial"` | `"partial" \| "always"` | The sticky behavior on the align axis. `partial` will keep the<br>content in the boundary as long as the trigger is at least partially<br>in the boundary whilst "always" will keep the content in the boundary<br>regardless. |
| `updatePositionStrategy` | `'optimized'` | `"always" \| "optimized"` | Strategy to update the position of the floating element on every animation frame. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `closeAutoFocus` | `event: Event` | Event handler called when auto-focusing on close.<br>Can be prevented. |
| `entryFocus` | `event: Event` |  |
| `escapeKeyDown` | `event: KeyboardEvent` | Event handler called when the escape key is down.<br>Can be prevented. |
| `focusOutside` | `event: FocusOutsideEvent` | Event handler called when the focus moves outside of the `DismissableLayer`.<br>Can be prevented. |
| `interactOutside` | `event: PointerDownOutsideEvent \| FocusOutsideEvent` | Event handler called when an interaction happens outside the `DismissableLayer`.<br>Specifically, when a `pointerdown` event happens outside or focus moves outside of it.<br>Can be prevented. |
| `openAutoFocus` | `event: Event` |  |
| `pointerDownOutside` | `event: PointerDownOutsideEvent` | Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.<br>Can be prevented. |

[MenubarSubContent.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar/MenubarSubContent.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "open" \\| "closed" |
| `[data-side]` | "left" \\| "right" \\| "bottom" \\| "top" |
| `[data-align]` | "start" \\| "end" \\| "center" |
| `[data-orientation]` | "vertical" \\| "horizontal" |

| CSS variable | Description |
| --- | --- |
| `--akar-menubar-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--akar-menubar-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--akar-menubar-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--akar-menubar-trigger-width` | The width of the trigger |
| `--akar-menubar-trigger-height` | The height of the trigger |

## Examples

### With submenus

You can create submenus by using `MenubarSub` in combination with its parts.

```vue
<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Sub menu →</MenubarSubTrigger>
            <MenubarPortal>
              <MenubarSubContent>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarArrow />
              </MenubarSubContent>
            </MenubarPortal>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### With disabled items

You can add special styles to disabled items via the `data-disabled` attribute.

```vue
<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem
            class="MenubarItem"
            disabled
          >
            …
          </MenubarItem>
          <MenubarItem class="MenubarItem">
            …
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

```css
/* styles.css */
.MenubarItem[data-disabled] {
  color: gainsboro;
}
```

### With separators

Use the `Separator` part to add a separator between items.

```vue
<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### With labels

Use the `Label` part to help label a section.

```vue
<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarTrigger,
} from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarLabel>Label</MenubarLabel>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### With checkbox items

Use the `CheckboxItem` part to add an item that can be checked.

```vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'akar'

const checked = ref(true)
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarCheckboxItem v-model="checked">
            <MenubarItemIndicator>
              <Icon icon="radix-icons:check" />
            </MenubarItemIndicator>
            Checkbox item
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### With radio items

Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.

```vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'akar'

const color = ref('blue')
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarRadioGroup v-model="color">
            <MenubarRadioItem value="red">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Red
            </MenubarRadioItem>
            <MenubarRadioItem value="blue">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Blue
            </MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### With complex items

You can add extra decorative elements in the `Item` parts, such as images.

```vue
<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>
            <img src="…">
            Adolfo Hess
          </MenubarItem>
          <MenubarItem>
            <img src="…">
            Miyah Myles
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as `--akar-menubar-trigger-width` and `--akar-menubar-content-available-height` to support this. Use them to constrain the content dimensions.

```vue
<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger> Trigger </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          class="MenubarContent"
          :side-offset="5"
          :align-offset="-3"
        >
          <MenubarItem> New Tab </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

```css
/* styles.css */
.MenubarContent {
  width: var(--akar-menubar-trigger-width);
  max-height: var(--akar-menubar-content-available-height);
}
```

### Origin-aware animations

We expose a CSS custom property `--akar-menubar-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.

```vue
<script setup lang="ts">
import { MenubarContent, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent class="MenubarContent">
          …
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

```css
/* styles.css */
.MenubarContent {
  transform-origin: var(--akar-menubar-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
```

### Collision-aware animations

We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

```vue
<script setup lang="ts">
import { MenubarContent, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'akar'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent class="MenubarContent">
          …
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

```css
/* styles.css */
.MenubarContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.MenubarContent[data-side="top"] {
  animation-name: slideUp;
}
.MenubarContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

## Accessibility

Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton) and uses [roving tabindex](https://www.w3.org/WAI/ARIA/apg/patterns/kbd_roving_tabindex) to manage focus movement among menu items.

### Keyboard Interactions

| Key | Description |
| --- | --- |

```text
When focus is on an item, activates the focused item.
  `,
},
{
  keys: ['Enter'],
  description: `
    When focus is on <Code>MenubarTrigger</Code>, opens the associated menu.
    <br />
    When focus is on an item, activates the focused item.
  `,
},
{
  keys: ['ArrowDown'],
  description: `
    When focus is on <Code>MenubarTrigger</Code>, opens the associated menu.
    <br />
    When focus is on an item, moves focus to the next item.
  `,
},
{
  keys: ['ArrowUp'],
  description: `When focus is on an item, moves focus to the previous item.`,
},
{
  keys: ['ArrowRight', 'ArrowLeft'],
  description: `
    When focus is on a <Code>MenubarTrigger</Code>, moves focus to the next or previous item. <br /> When focus is on a <Code>MenubarSubTrigger</Code>, opens or closes the submenu depending on reading direction. <br /> When focus is within a <Code>MenubarContent</Code>, opens the next menu in the menubar
  `,
},
{
  keys: ['Esc'],
  description: `
    Closes the currently open menu and moves focus to its <Code>MenubarTrigger</Code>.
  `,
},
```

]"
/>

---

- [ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menu/)
- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Menubar)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.