Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Menubar

Horizontal menu bar with dropdown menus

## 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​

Horizontal menu bar with dropdown menus

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 */ />