Menubar

A desktop menubar component that renders a horizontal navigation bar with nested menus. It displays menu items, triggers, and popups when interacted with. Use it to create accessible, styled menu systems in desktop applications.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/menubar

npx layro-cli add @educlopez/menubar

npx layro-cli add @educlopez/menubar

bunx layro-cli add @educlopez/menubar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { Menu } from "@base-ui/react/menu";
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
import { cn } from "@/lib/utils";
import type { ComponentProps, ReactNode } from "react";

export interface MenubarProps {
  children?: ReactNode;
  className?: string;
}

export type MenubarRootProps = Omit<
  ComponentProps<typeof MenubarPrimitive>,