> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/lists/navigationlist.md).

# NavigationList

NavigationList is a list of first level elements. When user clicks on any of the items he can navigate to another page. Also some pages may contain child pages: sub items (secondary level). Items of secondary level can contain item of third level. 

```tsx
import {} from 'altrone-ui';

const MENU: NavigationListMenu = [
  {
    label: 'Wi-Fi',
    value: 'wifi',
    icon: <Icon i="wifi" />
  },
  {
    label: 'Bluetooth',
    value: 'bluetooth',
    icon: <Icon i="bluetooth" />
  },
  ...
]

const [selected, setSelected] = useState('wifi');

return <NavigationList
  list={MENU}
  selected={selected}
  onChange={setSelected}
/>
```

## List items

There are three levels of nesting in NavigationList. The top level is NavigationItem, the second is SubNavigationItem and the third is SubSubNavigationItem.&#x20;

### <mark style="color:blue;">NavigationListMenu</mark>

```typescript
type NavigationListMenu = (NavigationItem | '-')[]
```

### <mark style="color:blue;">NavigationItem</mark>

```typescript
interface NavigationItem {
    label: string;
    value: unknown;
    icon?: JSX.Element;
    submenu?: SubNavigationItem[];
    indicator?: Indicator;
    compact?: boolean;
}
```

### <mark style="color:blue;">SubNavigationItem</mark>

```typescript
interface SubNavigationItem {
    label: string;    
    value: unknown;
    icon?: JSX.Element;
    submenu?: SubSubNavigationItem[];
    indicator?: Indicator;
}
```

### <mark style="color:blue;">SubSubNavigationItem</mark>

```typescript
interface SubSubNavigationItem {
    label: string;
    value: unknown;
    indicator?: Indicator;
}
```

## Custom List items

For some sidebar you can use your own components as NavigationItem component. To do that you can use `NavigationItemComponent`, `NavigationSubItemComponent` and `NavigationSubSubItemComponent`.&#x20;

These parameters are components that take properties `BaseNavigationItemInterface` and the corresponding properties of a component of a certain level.

### <mark style="color:blue;">BaseNavigationItemInterface</mark>

```typescript
interface BaseNavigationItemInterface {
  selected: boolean;
  selectedValue: unknown;
  onClick: (value: unknown) => void;
  elevation?: Elevation;
}
```

## Navigation List Action

In **Altrone 1.1** you can add your own action to the NavigationList. There are two types of action: button (is you passed `onClick` prop) and context menu (if you passed `contextMenu`).&#x20;

### <mark style="color:blue;">NavigationListAction</mark>

```typescript
interface NavigationListAction {
  icon: JSX.Element;
  title?: string;
  disabled?: boolean;
  danger?: boolean;
  onClick?: () => void;
  contextMenu?: ContextMenuType;
}
```

## Properties

<table><thead><tr><th>Property</th><th width="255.66666666666666">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>list</code></strong><mark style="color:red;"><strong><code>*</code></strong></mark></td><td><a href="#navigationlistmenu"><code>NavigationListMenu</code></a></td><td>Structure of the navigation</td></tr><tr><td><strong><code>selected</code></strong><mark style="color:red;"><strong><code>*</code></strong></mark></td><td><code>unknown</code></td><td>Selected item</td></tr><tr><td><strong><code>onChange</code></strong><mark style="color:red;"><strong><code>*</code></strong></mark></td><td><code>(selectedValue: unknown) => void</code></td><td>Callback is called when user selects new list item</td></tr><tr><td><strong><code>title</code></strong></td><td><code>string</code></td><td>Title of the menu</td></tr><tr><td><strong><code>action</code></strong></td><td><a href="#navigationlistaction"><code>NavigationListAction</code></a></td><td>Action in the top right corner of the list</td></tr><tr><td><strong><code>compact</code></strong></td><td><code>boolean</code></td><td>Makes the list compact</td></tr><tr><td><strong><code>NavigationItemComponent</code></strong></td><td><code>JSX.Element</code></td><td>Custom top level item component</td></tr><tr><td><strong><code>NavigationSubItemComponent</code></strong></td><td><code>JSX.Element</code></td><td>Custom second level item component</td></tr><tr><td><strong><code>NavigationSubSubItemComponent</code></strong></td><td><code>JSX.Element</code></td><td>Custom third level item component</td></tr><tr><td><strong><code>surface</code></strong></td><td><a href="/pages/oloJ8jbeM5PAAWv2r8iM"><code>Surface</code></a></td><td>Surface of the list</td></tr><tr><td><strong><code>elevation</code></strong></td><td><a href="/pages/yD1dpNh5bM71bi49RLsJ"><code>Elevation</code></a></td><td>Shadows of the list</td></tr><tr><td><strong><code>className</code></strong></td><td><code>string</code></td><td>Custom CSS class</td></tr></tbody></table>

## History

* **`Altrone 2.0`**:
  * added `surface` prop
  * added `elevation` prop
  * added `compact` prop
* **`Altrone 1.3`**:
  * added list separator
* **`Altrone 1.1`**:
  * added `action` prop
* **`Altrone 1.0`**: initial release