Adding Custom Content To Akveo's @nebular/theme 4.5.0 Sidebar Component

Akveo Nebular 4.0

Leonel Elimpe
by Leonel Elimpe
1 min read


  • Angular
  • Featured
  • Nebular UI Kit
  • nb-sidebar

So I’ve been working with Akveo’s Nebular UI Kit for a while now and it’s been a real issue adding custom content to nb-sidebar.

Today, I had a look at the component’s source code on Github and found out you can basically project anything into it, specifically into nb-sidebar > div.main-container > div.scrollable .

  selector: 'nb-sidebar',
  styleUrls: ['./sidebar.component.scss'],
  template: `
    <div class="main-container"
      <ng-content select="nb-sidebar-header"></ng-content>
      <div class="scrollable" (click)="onClick($event)">
      <ng-content select="nb-sidebar-footer"></ng-content>

Full source code here.

Notice the sidebar component projects nb-sidebar-header and nb-sidebar-footer into dedicated containers, and all other content into div.scrollable.

What this means is any custom content you put into <nb-sidebar>...</nb-sidebar> will be projected into div.scrollable. For example:

<nb-layout windowMode>

  <nb-layout-header fixed>

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>

    <ng-container *ngIf="menu$ | async; let menu">
      <nb-menu [items]="menu"></nb-menu>

      -- Found out I can just project any content into nb-sidebar template's .scrollable div.
      -- So decided to add the footer here and style it well so it displays properly.




Notice my xc-footer in the above sample. I was trying to add a footer to the sidebar but didn’t want a “sticky footer” which is what nb-sidebar-footer offers. So I placed it below nb-menu and added css to push it well below nb-menu.

nb-menu {
    * Assuming here the footer (xc-footer) is directly below nb-menu
    * Push the footer a good distance below the menu.
  padding-bottom: 3.5rem;

So basically you can add any content to the sidebar and if need be, properly style it 🙂.