Hire UsGet CoreUI PRO all-access →

Angular Sidebar Component

Sidebar

MarkdownChatGPTClaude

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.

Available in Other JavaScript Frameworks

CoreUI Angular Sidebar Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

How it works

Here’s what you need to know before getting started with the Angular Sidebar component:

  • c-sidebar renders the .sidebar container.
  • On mobile devices, the sidebar is hidden by default. Control it with the visible input.
  • On desktop devices, the sidebar is shown by default. Hide it with [visible]="false".
  • Use narrow to switch the sidebar to the narrow variant.
  • Use unfoldable to switch the sidebar to the narrow-unfoldable variant.
  • c-sidebar-nav renders .sidebar-nav and supports nested groups through c-nav-group.
  • c-sidebar-nav sets role="navigation" for you; override it with the role input when the nav is not the page’s main navigation.

Supported content

Sidebar comes with built-in support for a handful of sub-components. Choose from the following as needed:

  • c-sidebar-header for an optional header.
  • c-sidebar-brand for your company, product, or project name.
  • c-sidebar-nav for a full-height and lightweight navigation, including nested groups.
  • c-sidebar-footer for an optional footer.
  • cSidebarToggler for toggling the sidebar state.

Examples

Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer toggler.

import { Component } from '@angular/core';
import { cilBell, cilCart, cilLayers, cilMinus, cilPlus, cilPuzzle, cilSpeedometer } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavGroupComponent,
  NavItemComponent,
  NavTitleComponent,
  SidebarBrandComponent,
  SidebarComponent,
  SidebarFooterComponent,
  SidebarHeaderComponent,
  SidebarNavComponent,
  SidebarTogglerDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-example',
  templateUrl: './sidebar-example.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [
    IconDirective,
    NavGroupComponent,
    NavItemComponent,
    NavTitleComponent,
    SidebarBrandComponent,
    SidebarComponent,
    SidebarFooterComponent,
    SidebarHeaderComponent,
    SidebarNavComponent,
    SidebarTogglerDirective
  ]
})
export class SidebarExampleComponent {
  readonly icons = { cilBell, cilCart, cilLayers, cilMinus, cilPlus, cilPuzzle, cilSpeedometer };
}
<c-sidebar visible #sidebar1="cSidebar" class="border-end">
  <c-sidebar-header class="border-bottom">
    <c-sidebar-brand>
      <span class="d-sidebar-narrow-none">
        <svg
              role="img"
              aria-label="CoreUI Logo Full"
              width="88"
              height="32"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 312 115"
            >
              <g style="fill: currentColor">
                <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
                <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
                <g transform="translate(118 33)">
                  <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                  <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
                </g>
              </g>
            </svg>
      </span>
      <span class="d-sidebar-narrow">
        <svg
              role="img"
              aria-label="CoreUI Logo Signet"
              width="88"
              height="32"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 102 115"
            >
              <g style="fill: currentColor">
                <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
                <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              </g>
            </svg>
      </span>
    </c-sidebar-brand>
  </c-sidebar-header>
  <c-sidebar-nav variant="tree">
    <c-nav-title>Nav title</c-nav-title>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg> Nav item
    </c-nav-item>
    <c-nav-item href="#" [disabled]="true">
      <svg [cIcon]="icons.cilLayers" class="nav-icon"></svg> Disabled item
    </c-nav-item>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilBell" class="nav-icon"></svg> With badge
      <span class="badge badge-sm bg-primary ms-auto">NEW</span>
    </c-nav-item>
    <c-nav-group [togglerTemplate]="componentsToggler" visible>
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Accordion
      </c-nav-item>
      <c-nav-group [togglerTemplate]="formsToggler">
        <c-nav-item href="#">
          <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Select
        </c-nav-item>
        <c-nav-item href="#">
          <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Range
        </c-nav-item>
      </c-nav-group>
    </c-nav-group>
    <c-nav-item href="https://coreui.io/pricing/" class="mt-auto">
      <svg [cIcon]="icons.cilCart" class="nav-icon"></svg> Try CoreUI PRO
    </c-nav-item>
  </c-sidebar-nav>
  <c-sidebar-footer class="border-top">
    <button cSidebarToggler="sidebar1" toggle="unfoldable"></button>
  </c-sidebar-footer>
</c-sidebar>

<ng-template #componentsToggler let-visible>
  <svg [cIcon]="icons.cilPuzzle" class="nav-icon"></svg> Components
  <span class="nav-group-toggle-indicator">
    <svg [cIcon]="visible ? icons.cilMinus : icons.cilPlus" class="icon icon-sm"></svg>
  </span>
</ng-template>

<ng-template #formsToggler let-visible>
  <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Forms
  <span class="nav-group-toggle-indicator">
    <svg [cIcon]="visible ? icons.cilMinus : icons.cilPlus" class="icon icon-sm"></svg>
  </span>
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Narrow sidebar

Add the narrow input to make the sidebar narrow.

Use .d-sidebar-narrow to show content only in the narrow state and .d-sidebar-narrow-none to hide content in the narrow state.

import { Component } from '@angular/core';
import { cilCart, cilCloudDownload, cilSpeedometer } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavItemComponent,
  SidebarBrandComponent,
  SidebarComponent,
  SidebarHeaderComponent,
  SidebarNavComponent,
  TooltipDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-narrow',
  templateUrl: './sidebar-narrow.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [IconDirective, NavItemComponent, SidebarBrandComponent, SidebarComponent, SidebarHeaderComponent, SidebarNavComponent, TooltipDirective]
})
export class SidebarNarrowComponent {
  readonly icons = { cilCart, cilCloudDownload, cilSpeedometer };
}
<c-sidebar visible class="border-end" narrow>
  <c-sidebar-header class="border-bottom">
    <c-sidebar-brand>
      <svg
            role="img"
            aria-label="CoreUI Logo Signet"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 102 115"
          >
            <g style="fill: currentColor">
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
            </g>
          </svg>
    </c-sidebar-brand>
  </c-sidebar-header>
  <c-sidebar-nav>
    <c-nav-item href="#" cTooltip="Nav item" cTooltipPlacement="right">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg>
    </c-nav-item>
    <c-nav-item href="#" cTooltip="Nav item" cTooltipPlacement="right">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg>
    </c-nav-item>
    <c-nav-item href="https://coreui.io" cTooltip="Download" cTooltipPlacement="right">
      <svg [cIcon]="icons.cilCloudDownload" class="nav-icon"></svg>
    </c-nav-item>
    <c-nav-item href="https://coreui.io/pricing/" cTooltip="Get CoreUI PRO" cTooltipPlacement="right">
      <svg [cIcon]="icons.cilCart" class="nav-icon"></svg>
    </c-nav-item>
  </c-sidebar-nav>
</c-sidebar>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Unfoldable sidebar

Add the unfoldable input to make the sidebar narrow and expand it on hover.

Use .d-sidebar-narrow-unfoldable and .d-sidebar-narrow-unfoldable-none to control content visibility for unfoldable sidebars.

import { Component } from '@angular/core';
import { cilBell, cilCloudDownload, cilPuzzle, cilSpeedometer } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavGroupComponent,
  NavItemComponent,
  NavTitleComponent,
  SidebarBrandComponent,
  SidebarComponent,
  SidebarHeaderComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-unfoldable',
  templateUrl: './sidebar-unfoldable.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [IconDirective, NavGroupComponent, NavItemComponent, NavTitleComponent, SidebarBrandComponent, SidebarComponent, SidebarHeaderComponent, SidebarNavComponent]
})
export class SidebarUnfoldableComponent {
  readonly icons = { cilBell, cilCloudDownload, cilPuzzle, cilSpeedometer };
}
<c-sidebar visible class="border-end" unfoldable>
  <c-sidebar-header class="border-bottom">
    <c-sidebar-brand>
      <span class="d-sidebar-narrow-unfoldable-none">
        <svg
              role="img"
              aria-label="CoreUI Logo Full"
              width="88"
              height="32"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 312 115"
            >
              <g style="fill: currentColor">
                <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
                <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
                <g transform="translate(118 33)">
                  <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                  <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
                </g>
              </g>
            </svg>
      </span>
      <span class="d-sidebar-narrow-unfoldable">
        <svg
              role="img"
              aria-label="CoreUI Logo Signet"
              width="88"
              height="32"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 102 115"
            >
              <g style="fill: currentColor">
                <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
                <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              </g>
            </svg>
      </span>
    </c-sidebar-brand>
  </c-sidebar-header>
  <c-sidebar-nav>
    <c-nav-title>Nav title</c-nav-title>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg> Nav item
    </c-nav-item>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilBell" class="nav-icon"></svg> With badge
      <span class="badge badge-sm bg-primary ms-auto">NEW</span>
    </c-nav-item>
    <c-nav-group [togglerTemplate]="groupToggler" visible>
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
      </c-nav-item>
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
      </c-nav-item>
    </c-nav-group>
    <c-nav-item href="https://coreui.io" class="mt-auto">
      <svg [cIcon]="icons.cilCloudDownload" class="nav-icon"></svg> Download CoreUI
    </c-nav-item>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #groupToggler>
  <svg [cIcon]="icons.cilPuzzle" class="nav-icon"></svg> Nav dropdown
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Narrow visibility helpers

Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants:

  • .d-sidebar-narrow shows content only in the narrow state.
  • .d-sidebar-narrow-none hides content in the narrow state.
  • .d-sidebar-narrow-unfoldable shows content only when the sidebar uses the unfoldable variant.
  • .d-sidebar-narrow-unfoldable-none hides content when the sidebar uses the unfoldable variant.

c-sidebar-nav renders the .sidebar-nav container. It builds the navigation from the navItems array, and it also projects its content, so the navigation can be declared in the template instead — or both at once.

Basic navigation

Building blocks to declare inside c-sidebar-nav:

  • c-nav-title for a section heading.
  • c-nav-item for a navigation entry — set href and it renders the link itself.
  • cNavLink for a link written by hand, for example a routerLink.
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  NavItemComponent,
  NavLinkDirective,
  NavTitleComponent,
  SidebarComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-navigation',
  templateUrl: './sidebar-navigation.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [
    NavItemComponent,
    NavLinkDirective,
    NavTitleComponent,
    RouterLink,
    SidebarComponent,
    SidebarNavComponent
  ]
})
export class SidebarNavigationComponent {}
<c-sidebar visible class="border-end">
  <c-sidebar-nav>
    <c-nav-title>Components</c-nav-title>
    <c-nav-item [active]="true" href="#">Dashboard</c-nav-item>
    <c-nav-item href="#">Orders</c-nav-item>
    <c-nav-item>
      <a [routerLink] cNavLink>Link written by hand</a>
    </c-nav-item>
  </c-sidebar-nav>
</c-sidebar>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}
Added in v5.7.24

c-nav-group is an expandable section: toggler is the clickable label, the projected content becomes the group items. Set visible for a group that starts expanded, and compact to halve the padding of that one group.

import { Component } from '@angular/core';
import {
  NavGroupComponent,
  NavItemComponent,
  NavTitleComponent,
  SidebarComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-navigation-groups',
  templateUrl: './sidebar-navigation-groups.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [NavGroupComponent, NavItemComponent, NavTitleComponent, SidebarComponent, SidebarNavComponent]
})
export class SidebarNavigationGroupsComponent {}
<c-sidebar visible class="border-end">
  <c-sidebar-nav>
    <c-nav-title>Components</c-nav-title>
    <c-nav-group toggler="Base" visible>
      <c-nav-item href="#">Accordion</c-nav-item>
      <c-nav-item href="#">Breadcrumb</c-nav-item>
      <c-nav-group toggler="Forms" compact>
        <c-nav-item href="#">Select</c-nav-item>
        <c-nav-item href="#">Range</c-nav-item>
      </c-nav-group>
    </c-nav-group>
    <c-nav-group toggler="Buttons">
      <c-nav-item href="#">Button groups</c-nav-item>
      <c-nav-item href="#">Dropdowns</c-nav-item>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Groups behave as an accordion within their level: opening one collapses its siblings. c-sidebar-nav is the top level, every c-nav-group opens a level for its own children, and a collapsed group keeps the state of its subgroups — reopening it brings them back as they were. A link that becomes active expands the whole branch above it, which is what makes routerLinkActive reveal the current route on load; dropdownMode="none" turns that off.

Outside c-sidebar-nav a group falls back to its own state, so siblings no longer collapse each other. Provide NavGroupService on the container to get the accordion back:

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  imports: [NavComponent, NavGroupComponent, NavItemComponent],
  providers: [NavGroupService]
})
export class MenuComponent {}

Compact navigation

Added in v5.7.28

Set compact on c-sidebar-nav to halve the vertical padding of every link in the navigation, or on a single c-nav-group to compact just that section.

import { Component } from '@angular/core';
import { cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavGroupComponent,
  NavItemComponent,
  NavTitleComponent,
  SidebarComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-compact',
  templateUrl: './sidebar-compact.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [
    IconDirective,
    NavGroupComponent,
    NavItemComponent,
    NavTitleComponent,
    SidebarComponent,
    SidebarNavComponent
  ]
})
export class SidebarCompactComponent {
  readonly icons = { cilLayers, cilPuzzle, cilSpeedometer };
}
<c-sidebar visible class="border-end">
  <c-sidebar-nav compact>
    <c-nav-title>Compact nav</c-nav-title>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg> Dashboard
    </c-nav-item>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilLayers" class="nav-icon"></svg> Components
    </c-nav-item>
    <c-nav-group [togglerTemplate]="groupToggler" visible>
      <c-nav-item href="#">Compact item</c-nav-item>
      <c-nav-item href="#">Compact item</c-nav-item>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #groupToggler>
  <svg [cIcon]="icons.cilPuzzle" class="nav-icon"></svg> Nested group
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Tree navigation

Added in v5.7.28

Set variant="tree" on c-sidebar-nav to draw nested groups as a tree: each level gets a guide line and its items line up under the group they belong to.

import { Component } from '@angular/core';
import { cilFolder } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import { NavGroupComponent, NavItemComponent, SidebarComponent, SidebarNavComponent } from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-tree',
  templateUrl: './sidebar-tree.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [IconDirective, NavGroupComponent, NavItemComponent, SidebarComponent, SidebarNavComponent]
})
export class SidebarTreeComponent {
  readonly icons = { cilFolder };
}
<c-sidebar visible class="border-end">
  <c-sidebar-nav variant="tree">
    <c-nav-group [togglerTemplate]="parentToggler" visible>
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Child item
      </c-nav-item>
      <c-nav-group [togglerTemplate]="nestedToggler" visible>
        <c-nav-item href="#">
          <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nested child
        </c-nav-item>
        <c-nav-item href="#">
          <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nested child
        </c-nav-item>
      </c-nav-group>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #parentToggler>
  <svg [cIcon]="icons.cilFolder" class="nav-icon"></svg> Parent item
</ng-template>

<ng-template #nestedToggler>
  <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nested group
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Group indicator

c-nav-group renders the default indicator through the .nav-group-toggle styles, so a plain toggler needs no extra markup.

import { Component } from '@angular/core';
import { cilPuzzle } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavGroupComponent,
  NavItemComponent,
  SidebarComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-group-indicator',
  templateUrl: './sidebar-group-indicator.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [IconDirective, NavGroupComponent, NavItemComponent, SidebarComponent, SidebarNavComponent]
})
export class SidebarGroupIndicatorComponent {
  readonly icons = { cilPuzzle };
}
<c-sidebar visible class="border-end">
  <c-sidebar-nav>
    <c-nav-group [togglerTemplate]="groupToggler" visible>
      <c-nav-item href="#">Items group item</c-nav-item>
      <c-nav-item href="#">Items group item</c-nav-item>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #groupToggler>
  <svg [cIcon]="icons.cilPuzzle" class="nav-icon"></svg> Items group
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Custom group indicator

Added in v5.7.24

To replace the default indicator, pass a template to togglerTemplate — it receives the visible state, so the icon can follow the group. Put the icon in a .nav-group-toggle-indicator element.

import { Component } from '@angular/core';
import { NavGroupComponent, NavItemComponent, SidebarComponent, SidebarNavComponent } from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-custom-group-indicator',
  templateUrl: './sidebar-custom-group-indicator.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [NavGroupComponent, NavItemComponent, SidebarComponent, SidebarNavComponent]
})
export class SidebarCustomGroupIndicatorComponent {}
<c-sidebar visible class="border-end">
  <c-sidebar-nav>
    <c-nav-group [togglerTemplate]="groupToggler">
      <c-nav-item href="#">Accordion</c-nav-item>
      <c-nav-item href="#">Breadcrumb</c-nav-item>
    </c-nav-group>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #groupToggler let-visible>
  Base
  <span class="nav-group-toggle-indicator">{{ visible ? '−' : '+' }}</span>
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Data-driven navigation

Instead of declaring the navigation, hand c-sidebar-nav an INavData array through navItems and it renders the titles, links, badges and groups for you. Both ways can be combined: projected content is rendered after the items built from the array.

import { Component } from '@angular/core';
import {
  INavData,
  SidebarBrandComponent,
  SidebarComponent,
  SidebarFooterComponent,
  SidebarHeaderComponent,
  SidebarNavComponent,
  SidebarToggleDirective,
  SidebarTogglerDirective
} from '@coreui/angular';

export const navItems: INavData[] = [
  {
    title: true,
    name: 'Nav Title'
  },
  {
    name: 'Nav item',
    // url: '#',
    iconComponent: { name: 'cilSpeedometer' }
  },
  {
    name: 'With badge',
    iconComponent: { name: 'cilSpeedometer' },
    // url: '#',
    badge: {
      text: 'NEW',
      color: 'primary'
    }
  },
  {
    name: 'Nav dropdown',
    iconComponent: { name: 'cilPuzzle' },
    children: [
      {
        name: 'Nav dropdown item',
        url: './',
        iconComponent: { name: 'cilPuzzle' }
      },
      {
        name: 'Nav dropdown item',
        url: './',
        iconComponent: { name: 'cilPuzzle' }
      }
    ]
  }
];

@Component({
  selector: 'docs-sidebar-nav-items',
  templateUrl: './sidebar-nav-items.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [
    SidebarComponent,
    SidebarHeaderComponent,
    SidebarBrandComponent,
    SidebarNavComponent,
    SidebarFooterComponent,
    SidebarToggleDirective,
    SidebarTogglerDirective
  ]
})
export class SidebarNavItemsComponent {
  public navItems = navItems;
}
<c-sidebar visible #sidebar1="cSidebar" class="border-end">
  <c-sidebar-header class="border-bottom">
    <c-sidebar-brand>Sidebar Brand</c-sidebar-brand>
  </c-sidebar-header>
  <c-sidebar-nav [navItems]="navItems" />
  <c-sidebar-footer cSidebarToggle="sidebar1" class="border-top" toggle="unfoldable" style="cursor: pointer;">
    <button cSidebarToggler></button>
  </c-sidebar-footer>
</c-sidebar>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

dropdownMode decides how much the router drives these groups:

  • path (default) opens the group whose item matches the active route and closes it when the route no longer matches.
  • close does the same, and additionally closes a group when another one is clicked.
  • none leaves the group alone — it neither opens under a matching route nor closes on navigation, so the user’s clicks are the only thing that moves it.

Until 5.7.28 a group matching the active route was expanded on load under every dropdownMode, none included. Set dropdownMode="none" if you relied on that and want no route-driven expansion at all.

Dark sidebar

Change the appearance of sidebars with colorScheme="dark".

import { Component } from '@angular/core';
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import {
  NavGroupComponent,
  NavItemComponent,
  NavTitleComponent,
  SidebarBrandComponent,
  SidebarComponent,
  SidebarHeaderComponent,
  SidebarNavComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-sidebar-dark',
  templateUrl: './sidebar-dark.component.html',
  styleUrls: ['./sidebar-demo.scss'],
  imports: [IconDirective, NavGroupComponent, NavItemComponent, NavTitleComponent, SidebarBrandComponent, SidebarComponent, SidebarHeaderComponent, SidebarNavComponent]
})
export class SidebarDarkComponent {
  readonly icons = { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer };
}
<c-sidebar visible class="border-end" colorScheme="dark">
  <c-sidebar-header class="border-bottom">
    <c-sidebar-brand>
      <svg
            role="img"
            aria-label="CoreUI Logo Full"
            width="88"
            height="32"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 312 115"
          >
            <g style="fill: currentColor">
              <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
              <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
              <g transform="translate(118 33)">
                <path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
                <rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
              </g>
            </g>
          </svg>
    </c-sidebar-brand>
  </c-sidebar-header>
  <c-sidebar-nav>
    <c-nav-title>Nav title</c-nav-title>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilSpeedometer" class="nav-icon"></svg> Nav item
    </c-nav-item>
    <c-nav-item href="#">
      <svg [cIcon]="icons.cilLayers" class="nav-icon"></svg> With badge
      <span class="badge badge-sm bg-primary ms-auto">NEW</span>
    </c-nav-item>
    <c-nav-group [togglerTemplate]="groupToggler">
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
      </c-nav-item>
      <c-nav-item href="#">
        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
      </c-nav-item>
    </c-nav-group>
    <c-nav-item href="https://coreui.io">
      <svg [cIcon]="icons.cilCloudDownload" class="nav-icon"></svg> Download CoreUI
    </c-nav-item>
  </c-sidebar-nav>
</c-sidebar>

<ng-template #groupToggler>
  <svg [cIcon]="icons.cilPuzzle" class="nav-icon"></svg> Nav dropdown
</ng-template>
:host {

  .sidebar {
    position: relative;
    bottom: 0;
  }

  .sidebar-narrow-unfoldable {
    position: sticky;
  }

  //.sidebar-toggler {
  //  position: sticky;
  //  margin-top: auto;
  //  align-self: flex-end;
  //}
}
.docs-example {
  --cd-example-padding: 0;
}

Placement

By default, placement for sidebar components is on the left side of the viewport, but you can change it with the placement input:

  • placement="start" places the sidebar on the left side of the viewport.
  • placement="end" places the sidebar on the right side of the viewport.

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-zindex: #{$zindex-sidebar};
--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-brand-color: #{$sidebar-brand-color};
--cui-sidebar-brand-bg: #{$sidebar-brand-bg};

The narrow variants add their own:

scss
--cui-sidebar-narrow-width: #{$sidebar-narrow-width};
--cui-sidebar-padding-x: #{$sidebar-narrow-padding-x};

The navigation carries its own set:

scss
--cui-sidebar-nav-padding-x: #{$sidebar-nav-padding-x};
--cui-sidebar-nav-padding-y: #{$sidebar-nav-padding-y};
--cui-sidebar-nav-gap: #{$sidebar-nav-gap};

--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-radius: #{$sidebar-nav-link-border-radius};
--cui-sidebar-nav-link-border-width: #{$sidebar-nav-link-border-width};

--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-disabled-color: #{$sidebar-nav-link-disabled-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-icon-margin: #{$sidebar-nav-link-icon-margin};
--cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
--cui-sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width};
--cui-sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height};
--cui-sidebar-nav-link-icon-font-size: #{$sidebar-nav-link-icon-font-size};
--cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
--cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
--cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};

--cui-sidebar-nav-link-icon-bullet-size: #{$sidebar-nav-link-icon-bullet-size};
--cui-sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-link-icon-bullet-bg};
--cui-sidebar-nav-link-icon-bullet-border-width: #{$sidebar-nav-link-icon-bullet-border-width};
--cui-sidebar-nav-link-icon-bullet-border-radius: #{$sidebar-nav-link-icon-bullet-border-radius};
--cui-sidebar-nav-link-icon-bullet-border-color: #{$sidebar-nav-link-icon-bullet-border-color};
--cui-sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-link-active-icon-bullet-bg};
--cui-sidebar-nav-link-active-icon-bullet-border-color: #{$sidebar-nav-link-active-icon-bullet-border-color};
--cui-sidebar-nav-link-disabled-icon-bullet-bg: #{$sidebar-nav-link-disabled-icon-bullet-bg};
--cui-sidebar-nav-link-disabled-icon-bullet-border-color: #{$sidebar-nav-link-disabled-icon-bullet-border-color};
--cui-sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-link-hover-icon-bullet-bg};
--cui-sidebar-nav-link-hover-icon-bullet-border-color: #{$sidebar-nav-link-hover-icon-bullet-border-color};

--cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
--cui-sidebar-nav-group-border-width: #{$sidebar-nav-group-border-width};
--cui-sidebar-nav-group-border-radius: #{$sidebar-nav-group-border-radius};
--cui-sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
--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-color: #{$sidebar-nav-group-indicator-color};
--cui-sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
--cui-sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
--cui-sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
--cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};

And the tree variant adds:

scss
--cui-sidebar-nav-tree-group-border-color: #{$sidebar-nav-tree-group-border-color};
--cui-sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-tree-link-icon-bullet-bg};
--cui-sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-tree-link-hover-icon-bullet-bg};
--cui-sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-tree-link-active-icon-bullet-bg};

How to use CSS variables 

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': "red"
}
<div [ngStyle]="vars"></div>

Sass variables

scss
$sidebar-width:                            16rem !default;
$sidebar-widths: (
  sm: 12rem,
  lg: 20rem,
  xl: 24rem
) !default;
$sidebar-padding-y:                        $spacer !default;
$sidebar-padding-x:                        $spacer !default;
$sidebar-color:                            var(--cui-body-color) !default;
$sidebar-bg:                               var(--cui-body-bg) !default;
$sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
$sidebar-brand-color:                      var(--cui-body-color) !default;
$sidebar-brand-bg:                         rgba($black, .2) !default;
$sidebar-backdrop-bg:                      $black !default;
$sidebar-backdrop-opacity:                 .5 !default;
$sidebar-overlaid-box-shadow:              var(--cui-box-shadow) !default;

$sidebar-narrow-width:                     4rem !default;
$sidebar-narrow-padding-x:                 .5rem !default;
$sidebar-narrow-unfoldable-box-shadow:     var(--cui-box-shadow) !default;

API reference 

import { SidebarModule } from '@coreui/angular';

@NgModule({
    imports: [SidebarModule,]
})
export class AppModule() { }

c-sidebar

component

jsx
import { SidebarComponent } from '@coreui/angular'

Props

PropertyDefaultType
colorScheme-'dark', 'light'

Sets if the color of text should be colored for a light or dark background.

id-string

Sets html attribute id.

narrowfalseboolean

Make sidebar narrow.

overlaidfalseboolean

Set sidebar to overlaid variant.

placement-'start', 'end'

Components placement, there’s no default placement.

position'fixed''fixed', 'sticky'

Place sidebar in non-static positions.

size-'sm', 'lg', 'xl'

Size the component small, large, or extra large.

unfoldablefalseboolean

Expand narrowed sidebar on hover.

visiblefalseboolean

Toggle the visibility of sidebar component.

Events

Event name
visibleChange

Event emitted on visibility change.

  • $event boolean

c-sidebar-brand

component

jsx
import { SidebarBrandComponent } from '@coreui/angular'
PropertyDefaultType
brandFull-any

Image for the wide sidebar.

brandNarrow-any

Image for the narrow sidebar.

Router link for the sidebar brand.

You can pass content or brandFull and brandNarrow. Prop shape:

{
  src: '/assets/images/brand/coreui-pro-angular-white.svg',
  width: 190,
  height: 35,
  alt: 'CoreUI Logo'
}

c-sidebar-header

component wrapper

jsx
import { SidebarHeaderComponent } from '@coreui/angular'

component wrapper

jsx
import { SidebarFooterComponent } from '@coreui/angular'

cSidebarToggle

directive

jsx
import { SidebarToggleDirective } from '@coreui/angular'
PropertyDefaultType
cSidebarToggleundefinedstring

Id of sidebar for toggle action.

toggle'visible''visible', 'unfoldable'

Sidebar property name for toggle action.

cSidebarToggler

directive

jsx
import { SidebarTogglerDirective } from '@coreui/angular'
PropertyDefaultType
cSidebarTogglerundefinedstring

Id of sidebar for toggle action.

role'button'string

Default role for sidebar toggler.

toggle'visible''visible', 'unfoldable'

Sidebar property name for toggle action.

Composes cSidebarToggle, so the button carries the target sidebar id itself:

<button cSidebarToggler="sidebar1" toggle="unfoldable"></button>

c-sidebar-nav

component subject to change

jsx
import { SidebarNavComponent } from '@coreui/angular'
PropertyDefaultType
compactundefinedboolean

Renders the nav in compact mode.

dropdownMode'path''path', 'none', 'close'

Determines when an inactive c-sidebar-nav-group closes. - path: on an active route change only - close: when another group is clicked - none: never, the group stays open — it stops reacting to the route altogether, so a matching route neither opens it on init nor on a later navigation

groupItemsundefinedboolean

Renders c-sidebar-nav as a nested group's item list rather than the top-level sidebar nav.

navItems[]INavData[]

Configuration object for sidebar-nav.

role'navigation'string

Default role for sidebar nav.

variant5.7.28+undefined'tree'

Set the sidebar nav variant to tree.

The building blocks of a declared navigation — c-nav-group, c-nav-group-items, c-nav-item, c-nav-title and cNavLink — are documented on the Nav page.

INavData

interface

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