# SidebarItemList (Component)

   The sidebar item list component has been designed to display a list of items in a sidebar.

## Inputs

| Property      | Type                | Req   | Description                                    | Default                      |
| ------------- | ------------------- | ----- | ---------------------------------------------- | ---------------------------- |
| items         | StSidebarItem[]     | False | List of items displayed on the menu            | ''                           |
| defaultActive | Boolean             | False | Unset first item as active by default if false | true                         |
| deep          | Number              | False | Deep of the item list in the sidebar           | 0                            |
| visualMode    | StSidebarVisualMode | False | Visual mode used to display the item list      | 'StSidebarVisualMode.normal' |
| active        | String              | False | The id of the current active item              | ''                           |

## Outputs

| Property | Type          | Description                                                              |
| -------- | ------------- | ------------------------------------------------------------------------ |
| change   | StSidebarItem | Event emitted when the active item is changed. This emit the active item |

## Example


```html
<st-sidebar-item-list [items]="items"
      (change)="onChange($event)"
      [active]="active"
      [deep]="deep">
</st-sidebar-item-list>
```

## Models

*Sidebar items* (StSidebarItem)

```typescript
export interface StSidebarItem {
    id: string;
    label: string;
    class ? : string;
    items ? : StSidebarItem[];
    result ? : string;
    disabled ? : boolean;
}
```