Menubar

Docs

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/menubar.json

Utilisation

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"
 
export function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>New Window</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Share</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

API Reference

Menubar

Contains all the parts of a menubar.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the menu that should be open when initially rendered. Use when you do not need to control the state of the menubar.
`value`	`string`	-	The controlled value of the menu to open. Should be used in conjunction with `onValueChange`.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`dir`	`"ltr" \| "rtl"`	-	The reading direction of the menubar when applicable.
`loop`	`boolean`	`true`	When `true`, keyboard navigation will loop from last tab to first, and vice versa.

MenubarMenu

A top level menu item, contains a trigger with content combination.

MenubarTrigger

The button that toggles the menu. By default, the MenubarContent will position itself against the trigger.

MenubarContent

The component that pops out when the menu is open.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	The preferred side of the anchor to render against when open.
`sideOffset`	`number`	`0`	The distance in pixels from the anchor.
`align`	`"start" \| "center" \| "end"`	`"start"`	The preferred alignment against the anchor.
`alignOffset`	`number`	`0`	An offset in pixels from the "start" or "end" alignment options.
`loop`	`boolean`	`false`	When `true`, keyboard navigation will loop from last item to first, and vice versa.

MenubarItem

The component that contains the menubar items.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the item.
`onSelect`	`(event: Event) => void`	-	Event handler called when the user selects an item (via mouse or keyboard).
`textValue`	`string`	-	Optional text used for typeahead purposes.

Reddot UI Library

Menubar

Installation

Utilisation

API Reference

Menubar

MenubarMenu

MenubarTrigger

MenubarContent

MenubarItem

MenubarSeparator

MenubarShortcut

Références