Ember UI LogoEmber UI
Components

Menubar

A menubar component

Preview

Loading...
import {  Menubar,  MenubarCheckboxItem,  MenubarContent,  MenubarItem,  MenubarMenu,  MenubarRadioGroup,  MenubarRadioItem,  MenubarSeparator,  MenubarShortcut,  MenubarSub,  MenubarSubContent,  MenubarSubTrigger,  MenubarTrigger,} from "@/registry/axon/ui/menubar";export default function MenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>File</MenubarTrigger>        <MenubarContent>          <MenubarItem>            New Tab <MenubarShortcut>⌘T</MenubarShortcut>          </MenubarItem>          <MenubarItem>            New Window <MenubarShortcut>⌘N</MenubarShortcut>          </MenubarItem>          <MenubarItem disabled>New Incognito Window</MenubarItem>          <MenubarSeparator />          <MenubarSub>            <MenubarSubTrigger>Share</MenubarSubTrigger>            <MenubarSubContent>              <MenubarItem>Email link</MenubarItem>              <MenubarItem>Messages</MenubarItem>              <MenubarItem>Notes</MenubarItem>            </MenubarSubContent>          </MenubarSub>          <MenubarSeparator />          <MenubarItem>            Print... <MenubarShortcut>⌘P</MenubarShortcut>          </MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>Edit</MenubarTrigger>        <MenubarContent>          <MenubarItem>            Undo <MenubarShortcut>⌘Z</MenubarShortcut>          </MenubarItem>          <MenubarItem>            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>          </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>View</MenubarTrigger>        <MenubarContent>          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>          <MenubarCheckboxItem checked>            Always Show Full URLs          </MenubarCheckboxItem>          <MenubarSeparator />          <MenubarItem inset>            Reload <MenubarShortcut>⌘R</MenubarShortcut>          </MenubarItem>          <MenubarItem disabled inset>            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>          </MenubarItem>          <MenubarSeparator />          <MenubarItem inset>Toggle Fullscreen</MenubarItem>          <MenubarSeparator />          <MenubarItem inset>Hide Sidebar</MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>Profiles</MenubarTrigger>        <MenubarContent>          <MenubarRadioGroup value="benoit">            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>          </MenubarRadioGroup>          <MenubarSeparator />          <MenubarItem inset>Edit...</MenubarItem>          <MenubarSeparator />          <MenubarItem inset>Add Profile...</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

Installation

CLI

npx shadcn@latest add @emberui/menubar
yarn shadcn@latest add @emberui/menubar
pnpm dlx shadcn@latest add @emberui/menubar
bunx --bun shadcn@latest add @emberui/menubar

Reference

This component is based on the shadcn/ui Menubar component.

On this page