Menubar

since 1.0

A horizontal menu bar that displays a set of menus, typically used for application-level navigation and actions.

Example

"use client"

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@strongtie/design-system/menubar"

export function MenubarDefault() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Share</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Cut <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Copy <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Paste <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Reload</MenubarItem>
          <MenubarItem disabled>Force Reload</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Toggle Fullscreen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Install

import { Menubar } from "@strongtie/design-system/menubar"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Menubar
MenubarCheckboxItem
MenubarContent
MenubarGroup
MenubarItem
MenubarLabel
MenubarMenu
MenubarPortal
MenubarRadioGroup
MenubarRadioItem
MenubarSeparator
MenubarShortcut
MenubarSub
MenubarSubContent
MenubarSubTrigger
MenubarTrigger

Props

`<MenubarItem>`

Prop	Type	Default	Description
`inset`	`boolean`	-
`variant`	`default` \| `destructive`	-

`<MenubarLabel>`

Prop	Type	Default	Description
`inset`	`boolean`	-

`<MenubarMenu>`

Prop	Type	Default	Description

`<MenubarSubTrigger>`

Prop	Type	Default	Description
`inset`	`boolean`	-

Label Multi Select

On This Page

Example Install Components Props <MenubarItem><MenubarLabel><MenubarMenu><MenubarSubTrigger>

Contribute