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.

## Supported content Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed: - `c-sidebar-header` for optional header. - `c-sidebar-brand` for your company, product, or project name. - `c-sidebar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `c-sidebar-footer` for optional footer. - `c-sidebar-toggler` for use with our minimizer.

## Customizing ### CSS variables Angular sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass.

  ```scss
  --cui-sidebar-width: #{$sidebar-width};
  --cui-sidebar-bg: #{$sidebar-bg};
  --cui-sidebar-padding-x: #{$sidebar-padding-x};
  --cui-sidebar-padding-y: #{$sidebar-padding-y};
  --cui-sidebar-color: #{$sidebar-color};
  --cui-sidebar-border-width: #{$sidebar-border-width};
  --cui-sidebar-border-color: #{$sidebar-border-color};
  --cui-sidebar-brand-color: #{$sidebar-brand-color};
  --cui-sidebar-brand-height: #{$sidebar-brand-height};
  --cui-sidebar-brand-bg: #{$sidebar-brand-bg};
  --cui-sidebar-header-height: #{$sidebar-header-height};
  --cui-sidebar-header-bg: #{$sidebar-header-bg};
  --cui-sidebar-header-padding-x: #{$sidebar-header-padding-x};
  --cui-sidebar-header-padding-y: #{$sidebar-header-padding-y};
  --cui-sidebar-footer-bg: #{$sidebar-footer-bg};
  --cui-sidebar-footer-height: #{$sidebar-footer-height};
  --cui-sidebar-footer-padding-x: #{$sidebar-footer-padding-x};
  --cui-sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
  --cui-sidebar-toggler-bg: #{$sidebar-toggler-bg};
  --cui-sidebar-toggler-height: #{$sidebar-toggler-height};
  --cui-sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)};
  --cui-sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
  --cui-sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
  --cui-sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
  --cui-sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)}
  --cui-sidebar-narrow-width: #{$sidebar-narrow-width};
  --cui-sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
  --cui-sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
  --cui-sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
  --cui-sidebar-nav-title-color: #{$sidebar-nav-title-color};
  --cui-sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
  --cui-sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
  --cui-sidebar-nav-link-color: #{$sidebar-nav-link-color};
  --cui-sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
  --cui-sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
  --cui-sidebar-nav-link-border: #{$sidebar-nav-link-border-width} solid var(--cui-sidebar-nav-link-border-color);
  --cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
  --cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
  --cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
  --cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
  --cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
  --cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
  --cui-sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
  --cui-sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};
  --cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};
  --cui-sidebar-nav-icon-width: #{$sidebar-nav-icon-width};
  --cui-sidebar-nav-icon-height: #{$sidebar-nav-icon-height};
  --cui-sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size};
  --cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
  --cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
  --cui-sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
  --cui-sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
  --cui-sidebar-nav-group-indicator: #{escape-svg($sidebar-nav-group-indicator-icon)};
  --cui-sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
  --cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
  ```

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;
  ```

--- ## API reference ### Sidebar Module

```typescript import { SidebarModule } from '@coreui/angular'; @NgModule({ imports: [SidebarModule,] }) export class AppModule() { } ```

--- ### c-sidebar _component_ ##### Inputs

|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/images/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
  
  
  ```

### c-sidebar-nav _component_ **subject to change** ##### Inputs

|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;
  }
  ```