# Sidebar (Component)

   The sidebar component has been designed to navigate through different sections of a web page.

## Inputs

| Property          | Type                | Req   | Description                                                              | Default                      |
| ----------------- | ------------------- | ----- | ------------------------------------------------------------------------ | ---------------------------- |
| title             | String              | False | Title displayed on the top of menu                                       | ''                           |
| active            | StSidebarItem       | False | The current active item                                                  | ''                           |
| items             | StSidebarItem[]     | False | List of items displayed on the menu                                      | ''                           |
| defaultActive     | Boolean             | False | Unset first item as active by default if false                           | true                         |
| searchMode        | Boolean             | False | Boolean to enable or disable the search mode. By default, it is disabled | ''                           |
| searchPlaceholder | String              | False | Search placeholder                                                       | 'Search'                     |
| emptyResults      | String              | False | Message displayed when search does not have any result                   |                              |
| visualMode        | StSidebarVisualMode | False | Visual mode used to display the item list                                | 'StSidebarVisualMode.normal' |

## Outputs

| Property | Type          | Description                                                                        |
| -------- | ------------- | ---------------------------------------------------------------------------------- |
| change   | StSidebarItem | Event emitted when the active item is changed. This emits the active item          |
| search   | String        | Event emitted when search mode is enabled and user interacts with the search input |

## Example


```html
<st-sidebar class="sidebar"
      title="Mesos Manager"
      [items]="items"
      qaTag="sidebar-demo">
</st-sidebar>
```

## Models

*Sidebar items* (StSidebarItem)

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