Command Menu

Search documentation, components, and switch theme.

Atoms

Menubar

A horizontal menu bar component.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/menubar

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from '@/components/ui/menubar'
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Ledgers</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>View all ledgers</MenubarItem>
      <MenubarItem>Create new ledger</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Import transactions</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Payments</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Payment history</MenubarItem>
      <MenubarItem>Connectors</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Wallets</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>All wallets</MenubarItem>
      <MenubarItem>Create wallet</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>