Get Started
Migration
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Formsnap
- Hover Card
- Input OTP
- Input
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Range Calendar
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
Installation
Special sponsor
We're looking for one partner to be featured here.
Support the project and reach thousands of developers.
Reach outA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
<script lang="ts">
import * as Menubar from "$lib/components/ui/menubar/index.js";
let bookmarks = $state(false);
let fullUrls = $state(true);
let profileRadioValue = $state("benoit");
</script>
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
New Window <Menubar.Shortcut>⌘N</Menubar.Shortcut>
</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.Shortcut>⌘P</Menubar.Shortcut>
</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger>Edit</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
</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.Shortcut>⌘R</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item inset>
Force Reload <Menubar.Shortcut>⇧⌘R</Menubar.Shortcut>
</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 bind: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>
Installation
pnpm dlx shadcn-svelte@latest add menubar
npx shadcn-svelte@latest add menubar
bun x shadcn-svelte@latest add menubar
npx shadcn-svelte@latest add menubar
Install bits-ui
:
pnpm i bits-ui -D
npm i bits-ui -D
bun install bits-ui -D
yarn install bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Menubar from "$lib/components/ui/menubar/index.js";
</script>
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
New Tab
<Menubar.Shortcut>⌘T</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>New Window</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Share</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Print</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
</Menubar.Root>