Menu Bar - rafty/ui Docs

A visually persistent menu, commonly found in desktop applications, offers rapid access to a consistent set of commands.

This component is made on top of Radix UIs Menu Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarSub,
  MenubarLabel,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@rafty/ui";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarLabel />
      <MenubarItem />
      <MenubarGroup />
      <MenubarCheckboxItem />
      <MenubarRadioGroup>
        <MenubarRadioItem />
      </MenubarRadioGroup>
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent />
      </MenubarSub>
      <MenubarSeparator />
    </MenubarContent>
  </MenubarMenu>
</Menubar>;

Usage

<Menubar>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      File
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab
      </MenubarItem>
      <MenubarItem>
        New Window
      </MenubarItem>
      <MenubarItem>
        New Incognito Window
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Edit
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo
      </MenubarItem>
      <MenubarItem>
        Redo
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>
          Find
        </MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>
            Search the web…
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find…
          </MenubarItem>
          <MenubarItem>
            Find Next
          </MenubarItem>
          <MenubarItem>
            Find Previous
          </MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Cut
      </MenubarItem>
      <MenubarItem>
        Copy
      </MenubarItem>
      <MenubarItem>
        Paste
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      View
    </MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked>
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem>
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem>
        Reload
      </MenubarItem>
      <MenubarItem>
        Force Reload
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Toggle Fullscreen
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Hide Sidebar
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Profiles
    </MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="1">
        <MenubarRadioItem value="1">
          Andy
        </MenubarRadioItem>
        <MenubarRadioItem value="2">
          Benolt
        </MenubarRadioItem>
        <MenubarRadioItem value="3">
          Luis
        </MenubarRadioItem>
        <MenubarSeparator />
        <MenubarItem>
          Edit…
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem>
          Add Profile…
        </MenubarItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Size

There are 3 size options in the menu bar: sm, md (default) & lg.

<Menubar size="sm">
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      File
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab
      </MenubarItem>
      <MenubarItem>
        New Window
      </MenubarItem>
      <MenubarItem>
        New Incognito Window
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Edit
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo
      </MenubarItem>
      <MenubarItem>
        Redo
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>
          Find
        </MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>
            Search the web…
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find…
          </MenubarItem>
          <MenubarItem>
            Find Next
          </MenubarItem>
          <MenubarItem>
            Find Previous
          </MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Cut
      </MenubarItem>
      <MenubarItem>
        Copy
      </MenubarItem>
      <MenubarItem>
        Paste
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      View
    </MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked>
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem>
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem>
        Reload
      </MenubarItem>
      <MenubarItem>
        Force Reload
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Toggle Fullscreen
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Hide Sidebar
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Profiles
    </MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="1">
        <MenubarRadioItem value="1">
          Andy
        </MenubarRadioItem>
        <MenubarRadioItem value="2">
          Benolt
        </MenubarRadioItem>
        <MenubarRadioItem value="3">
          Luis
        </MenubarRadioItem>
        <MenubarSeparator />
        <MenubarItem>
          Edit…
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem>
          Add Profile…
        </MenubarItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Barebone

Pass isBarebone prop to remove all style in menubar.

<Menubar className="flex w-max items-center">
  <MenubarMenu>
    <MenubarTrigger
      className="hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-md px-4 py-1 focus:outline-none dark:text-white"
      variant="ghost"
    >
      File
    </MenubarTrigger>
    <MenubarContent className="dark:bg-secondary-800 w-full space-y-2 rounded-md bg-white p-2 py-1.5 text-sm">
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        New Tab
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        New Window
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        New Incognito Window
      </MenubarItem>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Print
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger
      className="hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-md px-4 py-1 focus:outline-none dark:text-white"
      variant="ghost"
    >
      Edit
    </MenubarTrigger>
    <MenubarContent className="dark:bg-secondary-800 w-[200px] space-y-1 rounded-md bg-white p-2 text-sm">
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Undo
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Redo
      </MenubarItem>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarSub>
        <MenubarSubTrigger className="hover:bg-secondary-200 dark:hover:bg-secondary-700 flex cursor-pointer items-center justify-between rounded-lg px-4 py-1.5 focus:outline-none">
          Find
        </MenubarSubTrigger>
        <MenubarSubContent className="dark:bg-secondary-800 ml-1 w-[200px] space-y-1 rounded-md bg-white p-2 text-sm">
          <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
            Search the web…
          </MenubarItem>
          <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
          <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
            Find…
          </MenubarItem>
          <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
            Find Next
          </MenubarItem>
          <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
            Find Previous
          </MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Cut
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Copy
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Paste
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger
      className="hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-md px-4 py-1 focus:outline-none dark:text-white"
      variant="ghost"
    >
      View
    </MenubarTrigger>
    <MenubarContent className="dark:bg-secondary-800 text-md w-full space-y-1 rounded-md bg-white p-2 text-sm">
      <MenubarCheckboxItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-6 py-1.5 focus:outline-none">
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem
        checked
        className="hover:bg-secondary-200 item-center dark:hover:bg-secondary-700 flex cursor-pointer rounded-md py-1.5 pl-6 focus:outline-none"
      >
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Reload
      </MenubarItem>
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Force Reload
      </MenubarItem>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Toggle Fullscreen
      </MenubarItem>
      <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
      <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-4 py-1.5 focus:outline-none">
        Hide Sidebar
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger
      className="hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-md px-4 py-1 focus:outline-none dark:text-white"
      variant="ghost"
    >
      Profiles
    </MenubarTrigger>
    <MenubarContent className="dark:bg-secondary-800 w-[180px] space-y-1 rounded-md bg-white p-2 px-1 text-sm">
      <MenubarRadioGroup value="1">
        <MenubarRadioItem
          className="hover:bg-secondary-200 dark:hover:bg-secondary-700 flex cursor-pointer items-center gap-2 rounded-md py-1.5 pl-6 focus:outline-none"
          value="1"
        >
          Andy
        </MenubarRadioItem>
        <MenubarRadioItem
          className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md py-1.5 pl-6 focus:outline-none"
          value="2"
        >
          Benolt
        </MenubarRadioItem>
        <MenubarRadioItem
          className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md py-1.5 pl-6 focus:outline-none"
          value="3"
        >
          Luis
        </MenubarRadioItem>
        <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
        <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-2 py-1.5 focus:outline-none">
          Edit…
        </MenubarItem>
        <MenubarSeparator className="border-secondary-200 dark:border-secondary-700 border " />
        <MenubarItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-2 py-1.5 focus:outline-none">
          Add Profile…
        </MenubarItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

UnStyled

Pass isUnstyled prop to remove style from a particular sub component.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      File
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem
        className="hover:bg-secondary-100 dark:hover:bg-secondary-700/60 text-secondary-600 dark:text-secondary-200 cursor-pointer rounded-sm px-3.5 py-1.5 text-sm font-medium focus:outline-none"
        isUnstyled
      >
        New Tab
      </MenubarItem>
      <MenubarItem>
        New Window
      </MenubarItem>
      <MenubarItem>
        New Incognito Window
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Edit
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo
      </MenubarItem>
      <MenubarItem>
        Redo
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>
          Find
        </MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>
            Search the web…
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find…
          </MenubarItem>
          <MenubarItem>
            Find Next
          </MenubarItem>
          <MenubarItem>
            Find Previous
          </MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Cut
      </MenubarItem>
      <MenubarItem>
        Copy
      </MenubarItem>
      <MenubarItem>
        Paste
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      View
    </MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem>
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem>
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem>
        Reload
      </MenubarItem>
      <MenubarItem>
        Force Reload
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Toggle Fullscreen
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Hide Sidebar
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger variant="ghost">
      Profiles
    </MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="1">
        <MenubarRadioItem value="1">
          Andy
        </MenubarRadioItem>
        <MenubarRadioItem value="2">
          Benolt
        </MenubarRadioItem>
        <MenubarRadioItem value="3">
          Luis
        </MenubarRadioItem>
        <MenubarSeparator />
        <MenubarItem>
          Edit…
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem>
          Add Profile…
        </MenubarItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Trigger

MenubarTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Conetnt

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Item

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Label

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

CheckboxItem

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

RadioGroup

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

RadioItem

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Saperator

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

SubTrigger

MenubarSubTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

SubContent

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false