Source: https://app-studio-6167b.web.app/docs/Menubar

@app-studio/components

# Menubar

A versatile component for structured navigation, displaying a list of interactive items and their sub-menus.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar.tsx)

## Import

```ts
import { Menubar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Menubar } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { EditIcon } from '@app-studio/components';

export const DefaultMenubar = () => {
  const items: any[] = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          icon: <EditIcon size={16} />,
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
        { separator: true },
        {
          id: 'save',
          label: 'Save',
          onClick: () => console.log('Save clicked'),
        },
        {
          id: 'save-as',
          label: 'Save As',
          onClick: () => console.log('Save As clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
        { separator: true },
        {
          id: 'cut',
          label: 'Cut',
          onClick: () => console.log('Cut clicked'),
        },
        {
          id: 'copy',
          label: 'Copy',
          onClick: () => console.log('Copy clicked'),
        },
        {
          id: 'paste',
          label: 'Paste',
          onClick: () => console.log('Paste clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
        { separator: true },
        {
          id: 'fullscreen',
          label: 'Fullscreen',
          onClick: () => console.log('Fullscreen clicked'),
        },
      ],
    },
    {
      id: 'help',
      label: 'Help',
      items: [
        {
          id: 'documentation',
          label: 'Documentation',
          onClick: () => console.log('Documentation clicked'),
        },
        {
          id: 'about',
          label: 'About',
          onClick: () => console.log('About clicked'),
        },
      ],
    },
  ];

  return (
    <View width="100%">
      <Text marginBottom={10}>Default Menubar</Text>
      <Menubar items={items} />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Menubar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `MenubarItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L13) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L17) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L19) |
| `defaultActiveMenuId` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L20) |
| `defaultOpenMenuId` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L21) |
| `views` | `MenubarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L23) |

### Menubar.Root

**Menubar.Root**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L30) |
| `orientation` | `Orientation` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L32) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L34) |
| `variant` | `Variant` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L36) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L38) |

### Menubar.Menu

**Menubar.Menu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L48) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L50) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L52) |
| `views` | `{ menu?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L54) |

### Menubar.Trigger

**Menubar.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L62) |
| `menuId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L64) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L66) |
| `views` | `{ trigger?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L68) |

### Menubar.Content

**Menubar.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L78) |
| `menuId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L80) |
| `views` | `{ content?: ViewProps; item?: ViewProps; icon?: ViewProps; separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L82) |

### Menubar.Item

**Menubar.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L96) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L98) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L100) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L102) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L104) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L106) |

### Menubar.Separator

**Menubar.Separator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L116) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.