Sidebar overview

NbSidebarComponent

Layout sidebar component.

Installation

Import NbSidebarModule.forRoot() to your app module.

@NgModule({
  imports: [
    // ...
    NbSidebarModule.forRoot(),
  ],
})
export class AppModule { }

and NbSidebarModule to your feature module where the component should be shown:

@NgModule({
  imports: [
    // ...
    NbSidebarModule,
  ],
})
export class PageModule { }

Usage

Sidebar can be placed on the left or the right side of the layout, or on start/end position of layout (depends on document direction, left to right or right to left) It can be fixed (shown above the content) or can push the layout when opened.

There are three states - expanded, collapsed, compacted. By default sidebar content is fixed and saves its position while the page is being scrolled.

Compacted sidebar example:

Sidebar also supports a responsive behavior, listening to window size change and changing its size respectably.

In a pair with header it is possible to setup a configuration when header is placed on a side of the sidebar and not on top of it. To achieve this simply put a subheader property to the header like this:

<nb-layout-header subheader></nb-layout-header>

Note that in such configuration sidebar shadow is removed and header cannot be make fixed.

NbSidebarHeaderComponent

Sidebar header container.

Placeholder which contains a sidebar header content, placed at the very top of the sidebar outside of the scroll area.

NbSidebarFooterComponent

Sidebar footer container.

Placeholder which contains a sidebar footer content, placed at the very bottom of the sidebar outside of the scroll area.

NbSidebarService

Sidebar service.

Root module service to control the sidebar from any part of the app.

Allows you to change sidebar state dynamically from any part of the app: