eo-n/ui
DocsComponents
UIComponentsMenubarNew

Menubar

A horizontal navigation bar that displays a list of menu items and dropdown menus.

Docs

Installation

CLI

npx shadcn@latest add "https://eo-n.vercel.app/r/menubar"

Manual

Copy and paste the following code into your project.

"use client";
 
import * as React from "react";
import { Menubar as MenubarRoot } from "@base-ui-components/react/menubar";
 
import { cn } from "@/lib/utils";
 
function Menubar({
  modal = false,
  className,
  ...props
}: React.ComponentProps<typeof MenubarRoot>) {
  return (
    <MenubarRoot
      data-slot="menubar"
      modal={modal}
      className={cn(
        "bg-background flex min-h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
        className
      )}
      {...props}
    />
  );
}
 
export { Menubar };
Update the import paths to match your project setup.

Usage

Import all parts and piece them together.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Menubar } from "@/components/ui/menubar";
<Menubar>
  <DropdownMenu>
    <DropdownMenuTrigger>File</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>New Tab</DropdownMenuItem>
      <DropdownMenuItem>New Window</DropdownMenuItem>
      <DropdownMenuItem>Share</DropdownMenuItem>
      <DropdownMenuItem>Print</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</Menubar>

Previous

Label

Next

Meter

On this page