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.
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>
);
}