Menubar

Example

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@databricks/appkit-ui/react"

export default function MenubarExample() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>New Incognito Window</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print... <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Find</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Search the web</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Find...</MenubarItem>
              <MenubarItem>Find Next</MenubarItem>
              <MenubarItem>Find Previous</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
          <MenubarCheckboxItem checked>
            Always Show Full URLs
          </MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarItem inset>
            Reload <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled inset>
            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Hide Sidebar</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarRadioGroup value="benoit">
            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
          </MenubarRadioGroup>
          <MenubarSeparator />
          <MenubarItem inset>Edit...</MenubarItem>
          <MenubarSeparator />
          <MenubarItem inset>Add Profile...</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Menubar

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	-
defaultValue	string		-	-
onValueChange	((value: string) => void)		-	-
loop	boolean		-	-
dir	enum		-	-
asChild	boolean		-	-

Usage

import { Menubar } from '@databricks/appkit-ui';

<Menubar /* props */ />

MenubarCheckboxItem

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
onSelect	((event: Event) => void)		-	-
asChild	boolean		-	-
disabled	boolean		-	-
checked	CheckedState		-	-
onCheckedChange	((checked: boolean) => void)		-	-
textValue	string		-	-

Usage

import { MenubarCheckboxItem } from '@databricks/appkit-ui';

<MenubarCheckboxItem /* props */ />

MenubarContent

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onEscapeKeyDown	((event: KeyboardEvent) => void)		-	-
onPointerDownOutside	((event: PointerDownOutsideEvent) => void)		-	-
onFocusOutside	((event: FocusOutsideEvent) => void)		-	-
onInteractOutside	((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)		-	-
onCloseAutoFocus	((event: Event) => void)		-	Event handler called when auto-focusing on close. Can be prevented.
loop	boolean		-	Whether keyboard navigation should loop around @defaultValue false
align	enum		-	-
side	enum		-	-
sideOffset	number		-	-
alignOffset	number		-	-
arrowPadding	number		-	-
avoidCollisions	boolean		-	-
collisionBoundary	Boundary | Boundary[]		-	-
collisionPadding	number | Partial<Record<"left" | "right" | "top" | "bottom", number>>		-	-
sticky	enum		-	-
hideWhenDetached	boolean		-	-
updatePositionStrategy	enum		-	-

Usage

import { MenubarContent } from '@databricks/appkit-ui';

<MenubarContent /* props */ />

MenubarGroup

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { MenubarGroup } from '@databricks/appkit-ui';

<MenubarGroup /* props */ />

MenubarItem

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
onSelect	((event: Event) => void)		-	-
asChild	boolean		-	-
disabled	boolean		-	-
textValue	string		-	-
inset	boolean		-	-
variant	enum		default	-

Usage

import { MenubarItem } from '@databricks/appkit-ui';

<MenubarItem /* props */ />

MenubarLabel

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
inset	boolean		-	-

Usage

import { MenubarLabel } from '@databricks/appkit-ui';

<MenubarLabel /* props */ />

MenubarMenu

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	-
__scopeMenubar	Scope		-	-

Usage

import { MenubarMenu } from '@databricks/appkit-ui';

<MenubarMenu /* props */ />

MenubarPortal

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
container	Element | DocumentFragment | null		-	Specify a container element to portal the content into.
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Usage

import { MenubarPortal } from '@databricks/appkit-ui';

<MenubarPortal /* props */ />

MenubarRadioGroup

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
value	string	✓	-	-
onValueChange	((value: string) => void)		-	-

Usage

import { MenubarRadioGroup } from '@databricks/appkit-ui';

<MenubarRadioGroup /* props */ />

MenubarRadioItem

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
onSelect	((event: Event) => void)		-	-
asChild	boolean		-	-
disabled	boolean		-	-
value	string	✓	-	-
textValue	string		-	-

Usage

import { MenubarRadioItem } from '@databricks/appkit-ui';

<MenubarRadioItem /* props */ />

MenubarSeparator

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { MenubarSeparator } from '@databricks/appkit-ui';

<MenubarSeparator /* props */ />

MenubarShortcut

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

This component extends standard HTML element attributes.

Usage

import { MenubarShortcut } from '@databricks/appkit-ui';

<MenubarShortcut /* props */ />

MenubarSub

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
open	boolean		-	-
defaultOpen	boolean		-	-
onOpenChange	((open: boolean) => void)		-	-

Usage

import { MenubarSub } from '@databricks/appkit-ui';

<MenubarSub /* props */ />

MenubarSubContent

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onEscapeKeyDown	((event: KeyboardEvent) => void)		-	-
onPointerDownOutside	((event: PointerDownOutsideEvent) => void)		-	-
onFocusOutside	((event: FocusOutsideEvent) => void)		-	-
onInteractOutside	((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)		-	-
loop	boolean		-	Whether keyboard navigation should loop around @defaultValue false
sideOffset	number		-	-
alignOffset	number		-	-
arrowPadding	number		-	-
avoidCollisions	boolean		-	-
collisionBoundary	Boundary | Boundary[]		-	-
collisionPadding	number | Partial<Record<"left" | "right" | "top" | "bottom", number>>		-	-
sticky	enum		-	-
hideWhenDetached	boolean		-	-
updatePositionStrategy	enum		-	-

Usage

import { MenubarSubContent } from '@databricks/appkit-ui';

<MenubarSubContent /* props */ />

MenubarSubTrigger

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
disabled	boolean		-	-
textValue	string		-	-
inset	boolean		-	-

Usage

import { MenubarSubTrigger } from '@databricks/appkit-ui';

<MenubarSubTrigger /* props */ />

MenubarTrigger

Source: packages/appkit-ui/src/react/ui/menubar.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { MenubarTrigger } from '@databricks/appkit-ui';

<MenubarTrigger /* props */ />