On this page
Loading...
```scss $mobile-breakpoint: md; ```
|prop|description|type|default|notes|
|:---|:---|:---|:---:|---|
|`colorScheme`|Color scheme dor text and background.|`dark \| light`|_undefined_|
|`narrow`|Make sidebar narrow.|`boolean`|_false_|
|`overlaid`|Set sidebar to overlaid variant.|`boolean`|_false_|
|`placement`|Sidebar placement.|`start' \| 'end'`|_undefined_|
|`position`|Place sidebar in non-static positions.|`string`|_undefined_|
|`size`|Size the component small, large, or extra large.|`sm \| lg \| xl`|_undefined_|
|`unfoldable`|Expand narrowed sidebar on hover.|`boolean`|_false_|
|`visible`|Toggle the visibility of sidebar component.|`boolean`|_false_|
##### Outputs
| name | description | type |
| ---- | ----------- | ---- |
| `visibleChange` | Event triggered on visible change. | `boolean` |
---
### c-sidebar-brand
_component_
##### Inputs
|prop|description|type|default|notes|
|:---|:---|:---|:---:|---|
|`brandFull`|Image for wide sidebar.|shape|_undefined_|
|`brandNarrow`|Image for wide sidebar|shape|_undefined_|
|`routerLink`|Router link for defined brand images.|`string`|_undefined_|
You can pass content or `brandFull` and `brandNarrow`. Prop shape:
```js
{
src: 'assets/img/brand/coreui-pro-angular-white.svg',
width: 190,
height: 35,
alt: 'CoreUI Logo'
}
```
---
### c-sidebar-header
_component_ wrapper
---
### c-sidebar-footer
_component_ wrapper
---
### cSidebarToggle
_directive_
##### Inputs
|prop|description|type|default|notes|
|:---|:---|:---|:---:|---|
|`cSidebarToggle`|Html `id` attr of toggled sidebar.|`string`|_undefined_|
|`toggle`|Sidebar property name for toggle action.|`visible \| unfoldable`|_visible_|
### c-sidebar-toggler
_component_
_For use with `cSidebarToggle` directive_
```html
|prop|description|type|default|notes|
|:---|:---|:---|:---:|---|
|`navItems`|Configuration object for sidebar-nav.|`INavData[]`|_[]_|
|`dropdownMode`| - `path`: close inactive sidebar-nav-group on active route change only (default)
- `close`: close opened inactive sidebar-nav-group on other group click
- `none`: keep sidebar-nav-group open
| `path` \| `close` \| `none` |_path_|
---
### INavData
_interface_
```typescript
interface INavAttributes {
[propName: string]: any;
}
interface INavWrapper {
attributes: INavAttributes;
element: string;
}
interface INavBadge {
text: string;
color: string;
size?: string;
class?: string;
}
interface INavLabel {
class?: string;
variant: string;
}
interface INavLinkProps {
queryParams?: {[k: string]: any};
fragment?: string;
queryParamsHandling?: 'merge' | 'preserve' | '';
preserveFragment?: boolean;
skipLocationChange?: boolean;
replaceUrl?: boolean;
state?: {[k: string]: any};
routerLinkActiveOptions?: {exact: boolean};
routerLinkActive?: string | string[];
}
interface INavData {
name?: string;
url?: string | any[];
href?: string;
icon?: string;
iconComponent?: any;
badge?: INavBadge;
title?: boolean;
children?: INavData[];
variant?: string;
attributes?: INavAttributes;
divider?: boolean;
class?: string;
label?: INavLabel;
wrapper?: INavWrapper;
linkProps?: INavLinkProps;
}
```
- `close`: close opened inactive sidebar-nav-group on other group click
- `none`: keep sidebar-nav-group open
| `path` \| `close` \| `none` |_path_|