Installation

pnpm dlx kliping@latest add menubar

Usage

<script setup lang="ts">
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar'
</script>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Share</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Print</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/menubar/menubar.vue components/ui/menubar/menubar-checkbox-item.vue components/ui/menubar/menubar-content.vue components/ui/menubar/menubar-group.vue components/ui/menubar/menubar-item.vue components/ui/menubar/menubar-label.vue components/ui/menubar/menubar-menu.vue components/ui/menubar/menubar-radio-group.vue components/ui/menubar/menubar-radio-item.vue components/ui/menubar/menubar-separator.vue components/ui/menubar/menubar-shortcut.vue components/ui/menubar/menubar-sub.vue components/ui/menubar/menubar-sub-content.vue components/ui/menubar/menubar-sub-trigger.vue components/ui/menubar/menubar-trigger.vue components/ui/menubar/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent>
          <MenubarItem />
          <MenubarSeparator />
        </MenubarSubContent>
      </MenubarSub>
      <MenubarCheckboxItem />
      <MenubarRadioGroup>
        <MenubarRadioItem />
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Bagian lain yang tersedia: MenubarGroup, MenubarLabel.

API Reference

Menubar

Prop	Type	Default	Description
modelValue?	string	—	The controlled value of the menu to open. Can be used as v-model.
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?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
loop?	boolean	—	When true, keyboard navigation will loop from last item to first, and vice versa.

Event	Payload	Description
@update:modelValue	[value: boolean]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: string; }

Data attribute	Value
[data-slot]	"menubar"

MenubarCheckboxItem

Prop	Type	Default	Description
modelValue?	CheckedState	—	The controlled checked state of the item. Can be used as v-model.
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. Use this when the content is complex, or you have non-textual content inside.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@update:modelValue	[payload: boolean]	Emitted when the value changes.
@select	[event: Event]	Emitted when it is selected, by pointer or keyboard; call event.preventDefault() to keep the menu open.

Slot	Props
#indicator-icon	—
#default	—

Data attribute	Value
[data-slot]	"menubar-checkbox-item"

MenubarContent

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-content"

MenubarGroup

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-group"

MenubarItem

Prop	Type	Default	Description
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. Use this when the content is complex, or you have non-textual content inside.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
inset?	boolean	—	Adds left padding (pl-8) so the text lines up with items that have an icon or indicator.
variant?	"default" | "destructive"	—	The visual style.

Event	Payload	Description
@select	[event: Event]	Emitted when it is selected, by pointer or keyboard; call event.preventDefault() to keep the menu open.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-item"
[data-inset]	boolean
[data-variant]	"default" | "destructive"

MenubarLabel

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
inset?	boolean	—	Adds left padding (pl-8) so the text lines up with items that have an icon or indicator.

Slot	Props
#default	—

Data attribute	Value
[data-inset]	boolean

MenubarMenu

Prop	Type	Default	Description
value?	string	—	A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-menu"

MenubarRadioGroup

Prop	Type	Default	Description
modelValue?	AcceptableValue	—	The value of the selected item in the group.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@update:modelValue	[payload: AcceptableValue]	Emitted when the value changes.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-radio-group"

MenubarRadioItem

Prop	Type	Default	Description
value	AcceptableValue	—	The unique value of the item.
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. Use this when the content is complex, or you have non-textual content inside.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@select	[event: Event]	Emitted when it is selected, by pointer or keyboard; call event.preventDefault() to keep the menu open.

Slot	Props
#indicator-icon	—
#default	—

Data attribute	Value
[data-slot]	"menubar-radio-item"

MenubarSeparator

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"menubar-separator"

MenubarShortcut

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-shortcut"

MenubarSub

Prop	Type	Default	Description
defaultOpen?	boolean	—	The initial open state when uncontrolled.
open?	boolean	—	The controlled open state. Bind with v-model:open.

Event	Payload	Description
@update:open	[payload: boolean]	Emitted when the open state changes.

Slot	Props
#default	{ open: boolean; }

Data attribute	Value
[data-slot]	"menubar-sub"

MenubarSubContent

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

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: PointerDownOutsideEvent]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.
@focusOutside	[event: FocusOutsideEvent]	Emitted when focus moves outside; call event.preventDefault() to keep it open.
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]	Emitted on any pointer down or focus outside; call event.preventDefault() to keep it open.
@openAutoFocus	[event: Event]	Emitted when focus moves in on open; call event.preventDefault() to stop it.
@closeAutoFocus	[event: Event]	Emitted when focus returns on close; call event.preventDefault() to stop it.
@entryFocus	[event: Event]	Emitted when focus enters the group; call event.preventDefault() to skip focusing the first item.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-sub-content"

MenubarSubTrigger

Prop	Type	Default	Description
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. Use this when the content is complex, or you have non-textual content inside.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
inset?	boolean	—	Adds left padding (pl-8) so the text lines up with items that have an icon or indicator.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-sub-trigger"
[data-inset]	boolean

MenubarTrigger

Prop	Type	Default	Description
disabled?	boolean	—	When true, prevents the user from interacting with item
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"menubar-trigger"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Menubar yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space	When focus is on MenubarTrigger, opens the menubar and focuses the first item. When focus is on an item, activates the focused item.
Enter	When focus is on MenubarTrigger, opens the associated menu. When focus is on an item, activates the focused item.
ArrowDown	When focus is on MenubarTrigger, opens the associated menu. When focus is on an item, moves focus to the next item.
ArrowUp	When focus is on an item, moves focus to the previous item.
ArrowRight + ArrowLeft	When focus is on a MenubarTrigger, moves focus to the next or previous item. When focus is on a MenubarSubTrigger, opens or closes the submenu depending on reading direction. When focus is within a MenubarContent, opens the next menu in the menubar
Esc	Closes the currently open menu and moves focus to its MenubarTrigger.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --background, --border, --destructive, --destructive-foreground, --muted-foreground, --popover, --popover-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.