120k
New

Menubar

PreviousNext

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/menubar

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>

Composition

Use the following composition to build a Menubar:

Menubar.Root
├── Menubar.Menu
│   ├── Menubar.Trigger
│   └── Menubar.Content
│       ├── Menubar.Item
│       ├── Menubar.Separator
│       ├── Menubar.CheckboxItem
│       ├── Menubar.RadioGroup
│       │   └── Menubar.RadioItem
│       └── Menubar.Sub
│           ├── Menubar.SubTrigger
│           └── Menubar.SubContent
│               └── Menubar.Item
└── Menubar.Menu
    ├── Menubar.Trigger
    └── Menubar.Content
        └── Menubar.Item

Examples

Checkbox

Use Menubar.CheckboxItem for toggleable options.

Radio

Use Menubar.RadioGroup and Menubar.RadioItem for single-select options.

Use Menubar.Sub, Menubar.SubTrigger, and Menubar.SubContent for nested menus.

With Icons

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI Menubar documentation.