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

@app-studio/components

# NavigationMenu

A flexible navigation menu component that supports nested items, icons, and different orientations.

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

## Import

```ts
import { NavigationMenu } 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 { NavigationMenu } from '@app-studio/components';
import { Text, Vertical, View } from 'app-studio';
import { HomeIcon, SettingsIcon, UserIcon, NotificationIcon, HelpIcon } from '@app-studio/components';

export const DefaultNavigationMenu = () => {
  const items = [
    {
      id: 'home',
      label: 'Home',
      icon: <HomeIcon widthHeight={20} />,
      href: '/home',
    },
    {
      id: 'settings',
      label: 'Settings',
      icon: <SettingsIcon widthHeight={20} />,
      items: [
        {
          id: 'profile',
          label: 'Profile',
          icon: <UserIcon widthHeight={20} />,
          href: '/profile',
        },
        {
          id: 'notifications',
          label: 'Notifications',
          icon: <NotificationIcon widthHeight={20} />,
          href: '/notifications',
        },
      ],
    },
    {
      id: 'help',
      label: 'Help',
      icon: <HelpIcon widthHeight={20} />,
      href: '/help',
    },
    {
      id: 'disabled',
      label: 'Disabled Item',
      disabled: true,
      href: '/disabled',
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={300}>
      <Text marginBottom={10}>Default Navigation Menu (Vertical)</Text>
      <View border="1px solid #e2e8f0" borderRadius={8} overflow="hidden">
        <NavigationMenu
          items={items}
          defaultActiveItemId="home"
          defaultExpandedItemIds={['settings']}
        />
      </View>
    </Vertical>
  );
};
```

## Props

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

**NavigationMenu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `NavigationItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L13) |
| `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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L15) |
| `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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L17) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L19) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L21) |
| `defaultActiveItemId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L22) |
| `defaultExpandedItemIds` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L23) |
| `onItemActivate` | `((itemId: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L25) |
| `views` | `NavigationMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L27) |

### NavigationMenu.List

**NavigationMenu.List**

| 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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L33) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L35) |

### NavigationMenu.Item

**NavigationMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `NavigationItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L41) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L43) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L45) |
| `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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L47) |
| `views` | `{ item?: ViewProps; trigger?: ViewProps; content?: ViewProps; icon?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L49) |

### NavigationMenu.Trigger

**NavigationMenu.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | `React.ReactNode \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L59) |
| `itemId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L61) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L63) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; trigger?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L65) |

### NavigationMenu.Content

**NavigationMenu.Content**

| 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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L74) |
| `itemId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L76) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L78) |

### NavigationMenu.Link

**NavigationMenu.Link**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L84) |
| `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/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L86) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L88) |
| `onClick` | `((event: React.MouseEvent) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L19) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L11) |
| `underline` | `TextDecorationStyle` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L9) |
| `iconSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L13) |

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.