Menubar

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

@react.component
let make = () =>
  <Menubar className="w-72">

Installation


npx shadcn@latest add @rescript-shadcn/Menubar

Usage

<Menubar>
  <Menubar.Menu>
    <Menubar.Trigger> {"File"->React.string} </Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Group>
        <Menubar.Item>
          {"New Tab"->React.string}
          <Menubar.Shortcut> {"\u2318T"->React.string} </Menubar.Shortcut>
        </Menubar.Item>
        <Menubar.Item> {"New Window"->React.string} </Menubar.Item>
      </Menubar.Group>
      <Menubar.Separator />
      <Menubar.Group>
        <Menubar.Item> {"Share"->React.string} </Menubar.Item>
        <Menubar.Item> {"Print"->React.string} </Menubar.Item>
      </Menubar.Group>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar>

Examples

Checkbox

Use MenubarCheckboxItem for toggleable options.

@react.component
let make = () =>
  <Menubar className="w-72">

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

@@directive("'use client'")

@react.component

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

@react.component
let make = () =>
  <Menubar className="w-72">

With Icons

@react.component
let make = () =>
  <Menubar className="w-72">

API Reference

See the Base UI Menubar documentation.