# Menubar

Horizontal menu bar with dropdown menus

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#menubar-1 "Direct link to Menubar")

Horizontal menu bar with dropdown menus

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<Menubar /* props */ />

```

## MenubarCheckboxItem[​](#menubarcheckboxitem "Direct link to MenubarCheckboxItem")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-1 "Direct link to Props")

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

### Usage[​](#usage-1 "Direct link to Usage")

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

<MenubarCheckboxItem /* props */ />

```

## MenubarContent[​](#menubarcontent "Direct link to MenubarContent")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-2 "Direct link to 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[​](#usage-2 "Direct link to Usage")

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

<MenubarContent /* props */ />

```

## MenubarGroup[​](#menubargroup "Direct link to MenubarGroup")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

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

<MenubarGroup /* props */ />

```

## MenubarItem[​](#menubaritem "Direct link to MenubarItem")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-4 "Direct link to Props")

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

### Usage[​](#usage-4 "Direct link to Usage")

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

<MenubarItem /* props */ />

```

## MenubarLabel[​](#menubarlabel "Direct link to MenubarLabel")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-5 "Direct link to Props")

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

### Usage[​](#usage-5 "Direct link to Usage")

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

<MenubarLabel /* props */ />

```

## MenubarMenu[​](#menubarmenu "Direct link to MenubarMenu")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-6 "Direct link to Props")

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

### Usage[​](#usage-6 "Direct link to Usage")

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

<MenubarMenu /* props */ />

```

## MenubarPortal[​](#menubarportal "Direct link to MenubarPortal")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-7 "Direct link to 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[​](#usage-7 "Direct link to Usage")

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

<MenubarPortal /* props */ />

```

## MenubarRadioGroup[​](#menubarradiogroup "Direct link to MenubarRadioGroup")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-8 "Direct link to Props")

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

### Usage[​](#usage-8 "Direct link to Usage")

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

<MenubarRadioGroup /* props */ />

```

## MenubarRadioItem[​](#menubarradioitem "Direct link to MenubarRadioItem")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-9 "Direct link to Props")

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

### Usage[​](#usage-9 "Direct link to Usage")

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

<MenubarRadioItem /* props */ />

```

## MenubarSeparator[​](#menubarseparator "Direct link to MenubarSeparator")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-10 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-10 "Direct link to Usage")

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

<MenubarSeparator /* props */ />

```

## MenubarShortcut[​](#menubarshortcut "Direct link to MenubarShortcut")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-11 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-11 "Direct link to Usage")

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

<MenubarShortcut /* props */ />

```

## MenubarSub[​](#menubarsub "Direct link to MenubarSub")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-12 "Direct link to Props")

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

### Usage[​](#usage-12 "Direct link to Usage")

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

<MenubarSub /* props */ />

```

## MenubarSubContent[​](#menubarsubcontent "Direct link to MenubarSubContent")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-13 "Direct link to 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[​](#usage-13 "Direct link to Usage")

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

<MenubarSubContent /* props */ />

```

## MenubarSubTrigger[​](#menubarsubtrigger "Direct link to MenubarSubTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-14 "Direct link to Props")

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

### Usage[​](#usage-14 "Direct link to Usage")

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

<MenubarSubTrigger /* props */ />

```

## MenubarTrigger[​](#menubartrigger "Direct link to MenubarTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx)

### Props[​](#props-15 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-15 "Direct link to Usage")

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

<MenubarTrigger /* props */ />

```