Menubar

navigation

A visually persistent menu common in desktop applications providing quick access to commands.

Preview

Installation

npm install @launchapp/design-system

Import

import {  MenubarRoot, MenubarMenu, MenubarTrigger, MenubarContent,  MenubarItem, MenubarSeparator, MenubarShortcut} from "@launchapp/design-system";

Examples

Basic Menubar

<MenubarRoot>  <MenubarMenu>    <MenubarTrigger>File</MenubarTrigger>    <MenubarContent>      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>      <MenubarItem>New Window</MenubarItem>      <MenubarSeparator />      <MenubarItem>Share</MenubarItem>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>Edit</MenubarTrigger>    <MenubarContent>      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>      <MenubarItem>Redo</MenubarItem>    </MenubarContent>  </MenubarMenu></MenubarRoot>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value of the open menu.
`onValueChange`	`(value: string) => void`	—	Callback when the open menu changes.

← PreviousLabel

Next →MultiSelect