Accent Menubar

Navigation

About

A self-contained, animated top menu bar with dropdown menus and a soft accent highlight on the open menu, for app-style navigation like File/Edit/View toolbars.

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

Code

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

Usage.tsx

import MenubarAccent, {
  GlowMenubar,
  FillMenubar,
  UnderlineMenubar,
  EdgeMenubar,
} from "@/components/ui/menubar-accent";

function Row({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-2">
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      {children}
    </div>
  );
}

export default function MenubarAccentDemo() {
  return (
    <div className="grid grid-cols-2 gap-x-16 gap-y-64 p-10">
      <Row label="Bar">
        <MenubarAccent />
      </Row>
      <Row label="Glow">
        <GlowMenubar />
      </Row>
      <Row label="Fill">
        <FillMenubar />
      </Row>
      <Row label="Underline">
        <UnderlineMenubar />
      </Row>
      <Row label="Edge">
        <EdgeMenubar />
      </Row>
    </div>
  );
}