Angular Sidebar CoreUI

On this page

## 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.

Some additional CSS variables are also present on `.sidebar-backdrop`:

#### How to use CSS variables

### SASS variables




  ```scss
  $mobile-breakpoint: md;
  ```

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

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