Menubar
A row of menus for related commands.
Upstream documentationExamples
No option selected
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Menubar
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/menubar.json'Usage
A complete example using the installed component and hook paths.
Menubar usage
"use client";import { useState } from "react";import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";function MenubarPreview() { const [choice, setChoice] = useState("No option selected"); return ( <div className="space-y-2"> <Menubar> <MenubarMenu> <MenubarTrigger>View</MenubarTrigger> <MenubarContent> <MenubarItem onClick={() => setChoice("Grid selected")}>Grid</MenubarItem> <MenubarItem onClick={() => setChoice("List selected")}>List</MenubarItem> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>Help</MenubarTrigger> <MenubarContent> <MenubarItem onClick={() => setChoice("Help selected")}>About this example</MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> <p aria-live="polite" className="text-xs text-muted-foreground"> {choice} </p> </div> );}export default function Demo() { return <MenubarPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Menubar
Menubar props
MenubarPrimitive.PropsMenubarPortal
MenubarPortal props
React.ComponentProps<typeof DropdownMenuPortal>MenubarMenu
MenubarMenu props
React.ComponentProps<typeof DropdownMenu>MenubarTrigger
MenubarTrigger props
React.ComponentProps<typeof DropdownMenuTrigger>MenubarContent
MenubarContent props
React.ComponentProps<typeof DropdownMenuContent>- align
- "start"
- alignOffset
- -4
- sideOffset
- 8
MenubarGroup
MenubarGroup props
React.ComponentProps<typeof DropdownMenuGroup>MenubarSeparator
MenubarSeparator props
React.ComponentProps<typeof DropdownMenuSeparator>MenubarLabel
MenubarLabel props
React.ComponentProps<typeof DropdownMenuLabel> & { inset?: boolean;}MenubarItem
MenubarItem props
React.ComponentProps<typeof DropdownMenuItem>- variant
- "default"
MenubarShortcut
MenubarShortcut props
React.ComponentProps<typeof DropdownMenuShortcut>MenubarCheckboxItem
MenubarCheckboxItem props
MenuPrimitive.CheckboxItem.Props & { inset?: boolean;} & { sound?: boolean }- sound
- true
MenubarRadioGroup
MenubarRadioGroup props
React.ComponentProps<typeof DropdownMenuRadioGroup>MenubarRadioItem
MenubarRadioItem props
MenuPrimitive.RadioItem.Props & { inset?: boolean;} & { sound?: boolean }- sound
- true
MenubarSub
MenubarSub props
React.ComponentProps<typeof DropdownMenuSub>MenubarSubTrigger
MenubarSubTrigger props
React.ComponentProps<typeof DropdownMenuSubTrigger> & { inset?: boolean;}MenubarSubContent
MenubarSubContent props
React.ComponentProps<typeof DropdownMenuSubContent>