Menubar

Navigation 20

About

A horizontal menu bar component for navigation and actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Menubar to your project and fits it to your theme.

Code

How Menubar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  MenuBar,
  MenuBarMenu,
  MenuBarTrigger,
  MenuBarContent,
  MenuBarItem,
  MenuBarSeparator,
  MenuBarSub,
  MenuBarSubTrigger,
  MenuBarSubContent 
} from "@/components/ui/menubar";

import { File, Edit, Settings, Plus, Save } from "lucide-react";

export default function DemoOne() {
  return(
    <> 
      <div>
        <MenuBar>
          <MenuBarMenu>
            <MenuBarTrigger icon={File}>File</MenuBarTrigger>
            <MenuBarContent>
              <MenuBarItem icon={Plus} shortcut="⌘N">
                New File
              </MenuBarItem>
              <MenuBarItem icon={Save} shortcut="⌘S">
                Save
              </MenuBarItem>
            </MenuBarContent>
          </MenuBarMenu>
          <MenuBarMenu>
            <MenuBarTrigger icon={Edit}>Edit</MenuBarTrigger>
            <MenuBarContent>
              <MenuBarItem shortcut="⌘Z">Undo</MenuBarItem>
              <MenuBarItem shortcut="⌘Y">Redo</MenuBarItem>
            </MenuBarContent>
          </MenuBarMenu>
          <MenuBarMenu>
            <MenuBarTrigger icon={Settings}>Settings</MenuBarTrigger>
            <MenuBarContent>
              <MenuBarSub>
                <MenuBarSubTrigger>Preferences</MenuBarSubTrigger>
                <MenuBarSubContent>
                  <MenuBarItem>Theme</MenuBarItem>
                  <MenuBarItem>Language</MenuBarItem>
                </MenuBarSubContent>
              </MenuBarSub>
            </MenuBarContent>
          </MenuBarMenu>
        </MenuBar>
      </div>
    </>
  );
}