kliping.pro
  • Docs
  • Directory
  • Colors
  • Typeset
Docs
    • Accordion
    • Action Bar
    • Alert
    • Alert Dialog
    • Angle Slider
    • Aspect Ratio
    • Attachment
    • Avatar
    • Avatar Group
    • Badge
    • Badge Overflow
    • Banner
    • Breadcrumb
    • Bubble
    • Button
    • Button Group
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Group
    • Chip
    • Circular Progress
    • Client Only
    • Collapsible
    • Color Picker
    • Color Swatch
    • Combobox
    • Combobox Advanced
    • Command
    • Compare Slider
    • Composition
    • Context Menu
    • Cropper
    • Data Grid
    • Data Table
    • Data Table Advanced
    • Date Picker
    • Dialog
    • Direction Provider
    • Drawer
    • Dropdown Menu
    • Editable
    • Empty
    • Field
    • File Upload
    • Form
    • FPS
    • Gauge
    • Hitbox
    • Hover Card
    • Input
    • Input Group
    • Input OTP
    • Item
    • Kanban
    • Kbd
    • Kbd Advanced
    • Key Value
    • Label
    • List
    • Listbox
    • Map
    • Marker
    • Marquee
    • Mask Input
    • Masonry
    • Media Player
    • Mention
    • Menubar
    • Message
    • Message Scroller
    • Native Select
    • Navigation Menu
    • Number Field
    • Pagination
    • Pending
    • Phone Input
    • Pin Input
    • Popover
    • Portal
    • Presence
    • Progress
    • QR Code
    • Questionnaire
    • Radio Group
    • Range Calendar
    • Rating
    • Relative Time Card
    • Resizable
    • Responsive Dialog
    • Scroll Area
    • Scroll Spy
    • Scroller
    • Segmented Input
    • Select
    • Selection Toolbar
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Software Purchase Card
    • Sonner
    • Sortable
    • Speed Dial
    • Spinner
    • Stack
    • Stat
    • Status
    • Stepper
    • Stepper Advanced
    • Swap
    • Switch
    • Table
    • Tabs
    • Tags Input
    • Tags Input Advanced
    • Textarea
    • Time Picker
    • Timeline
    • Toast
    • Toggle
    • Toggle Group
    • Tooltip
    • Tour
    • Typography
    • Visually Hidden
    • Visually Hidden Input

Menubar

PreviousNext

Menu yang menetap di layar, umum dipakai di aplikasi desktop untuk mengakses sekumpulan perintah.

Docs API Reference

Installation ​

pnpm dlx shadcn-vue@latest add menubar

Pasang dependensi berikut:

pnpm add reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Usage ​

vue
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
PreviousMentionNext Message

On This Page

InstallationUsage
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping