Are you ready for Cyber Monday Week Deals?
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.
On this page
Angular Sidebar Component
Angular Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Sidebar comes with built-in support for branding, navigation, and more.
Loading...
Loading...
Loading...
Some additional CSS variables are also present on `.sidebar-backdrop`: ```css --cui-backdrop-zindex: #{$zindex-sidebar-backdrop}; --cui-backdrop-bg: #{$sidebar-backdrop-bg}; --cui-backdrop-opacity: #{$sidebar-backdrop-opacity}; ```
```css --cui-mobile-breakpoint: #{$mobile-breakpoint}; ``` #### How to use CSS variables ```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html <div [ngStyle]="vars"></div> ``` ### SASS variables ```scss $sidebar-width: 16rem; $sidebar-widths: ( sm: 12rem, lg: 20rem, xl: 24rem ); $sidebar-padding-y: 0; $sidebar-padding-x: 0; $sidebar-color: $high-emphasis-inverse; $sidebar-bg: $gray-base; $sidebar-border-width: 0; $sidebar-border-color: transparent; $sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s; $sidebar-brand-height: 4rem; $sidebar-brand-color: $high-emphasis-inverse; $sidebar-brand-bg: rgba($black, .2); $sidebar-header-height: 4rem; $sidebar-header-padding-y: .75rem; $sidebar-header-padding-x: 1rem; $sidebar-header-bg: rgba($black, .2); $sidebar-header-height-transition: height .15s, padding .15s; $sidebar-narrow-width: 4rem; $sidebar-backdrop-bg: $black; $sidebar-backdrop-opacity: .5; $sidebar-nav-title-padding-y: .75rem; $sidebar-nav-title-padding-x: 1rem; $sidebar-nav-title-margin-top: 1rem; $sidebar-nav-title-color: $medium-emphasis-inverse; $sidebar-nav-title-transition: height .15s, margin .15s; $sidebar-nav-link-padding-y: .8445rem; $sidebar-nav-link-padding-x: 1rem; $sidebar-nav-link-color: $medium-emphasis-inverse; $sidebar-nav-link-bg: transparent; $sidebar-nav-link-border-width: 0; $sidebar-nav-link-border-color: transparent; $sidebar-nav-link-border-radius: 0; $sidebar-nav-link-transition: background .15s ease, color .15s ease; $sidebar-nav-link-icon-color: $medium-emphasis-inverse; $sidebar-nav-link-hover-color: $high-emphasis-inverse; $sidebar-nav-link-hover-bg: rgba($white, .05); $sidebar-nav-link-hover-icon-color: $high-emphasis-inverse; $sidebar-nav-link-active-color: $high-emphasis-inverse; $sidebar-nav-link-active-bg: rgba($white, .05); $sidebar-nav-link-active-icon-color: $high-emphasis-inverse; $sidebar-nav-link-disabled-color: $disabled-inverse; $sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color; $sidebar-nav-icon-width: 4rem; $sidebar-nav-icon-height: 1.25rem; $sidebar-nav-icon-font-size: $sidebar-nav-icon-height; $sidebar-nav-group-bg: rgba(0, 0, 0, .2); $sidebar-nav-group-transition: background .15s ease-in-out; $sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color; $sidebar-nav-group-items-padding-y: 0; $sidebar-nav-group-items-padding-x: 0; $sidebar-nav-group-items-transition: height .15s ease; $sidebar-nav-group-indicator-color: $medium-emphasis-inverse; $sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"); $sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color; $sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"); $sidebar-nav-group-indicator-transition: transform .15s; $sidebar-footer-height: auto; $sidebar-footer-padding-y: .75rem; $sidebar-footer-padding-x: 1rem; $sidebar-footer-bg: rgba($black, .2); $sidebar-footer-height-transition: height .15s, padding .15s; $sidebar-toggler-height: 3rem; $sidebar-toggler-bg: rgba($black, .2); $sidebar-toggler-transition: transform .15s; $sidebar-toggler-indicator-width: 4rem; $sidebar-toggler-indicator-height: 3rem; $sidebar-toggler-indicator-color: $gray-600; $sidebar-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'>%3Cpath fill='#{$sidebar-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/></svg>"); $sidebar-toggler-hover-bg: rgba(0, 0, 0, .3); $sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color; $sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'>%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/></svg>"); $sidebar-light-color: $body-color; $sidebar-light-bg: $white; $sidebar-light-border-width: 0; $sidebar-light-border-color: transparent; $sidebar-light-brand-color: $white; $sidebar-light-brand-bg: $primary; $sidebar-light-header-bg: rgba($black, .2); $sidebar-light-nav-title-color: $medium-emphasis; $sidebar-light-nav-link-color: $medium-emphasis; $sidebar-light-nav-link-bg: transparent; $sidebar-light-nav-link-icon-color: $medium-emphasis; $sidebar-light-nav-link-hover-color: $high-emphasis; $sidebar-light-nav-link-hover-bg: theme-color("primary"); $sidebar-light-nav-link-hover-icon-color: $high-emphasis; $sidebar-light-nav-link-active-color: $high-emphasis; $sidebar-light-nav-link-active-bg: rgba($white, .05); $sidebar-light-nav-link-active-icon-color: $high-emphasis; $sidebar-light-nav-link-disabled-color: $disabled; $sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color; $sidebar-light-nav-group-bg: rgba(0, 0, 0, .05); $sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color; $sidebar-light-nav-group-indicator-color: $medium-emphasis; $sidebar-light-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"); $sidebar-light-nav-group-indicator-hover-color: $sidebar-light-nav-link-hover-color; $sidebar-light-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"); $sidebar-light-footer-bg: rgba($black, .1); $sidebar-light-toggler-bg: rgba($black, .1); $sidebar-light-toggler-hover-bg: rgba(0, 0, 0, .2); $sidebar-light-toggler-indicator-color: $medium-emphasis; $sidebar-light-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'>%3Cpath fill='#{$sidebar-light-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/></svg>"); $sidebar-light-toggler-indicator-hover-color: $sidebar-light-nav-link-hover-color; $sidebar-light-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'>%3Cpath fill='#{$sidebar-light-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/></svg>"); ```
```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_|