Menubar
A horizontal application menu bar with nested dropdown menus, like native desktop menus.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/menubar.jsonUsage
Use Menubar for desktop-style application menus (File, Edit, View) with keyboard navigation between
top-level menus and nested submenus. Built on reka-ui's Menubar.
<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>
</MenubarContent>
</MenubarMenu>
</Menubar>
</template>