Layout example with a fixed sidebar and navbar

This div has the .nj-sidebar-content class. This class is mandatory to have the right behavior with a fixed sidebar.

For demonstration purpose, we added a padding of 16px and a height of 2000px, feel free to change it.


To have the navbar behave correctly in this layout, we need to add a few lines of css:

  1. Adjust the height of the sidebar to accommodate the navbar:

    .nj-sidebar.nj-sidebar--custom-height {
      --nj-sidebar-top: var(--height-of-your-navbar);
      --nj-sidebar-height: calc(100% - var(--height-of-your-navbar));
    }

  2. Position the navbar fixed:

    .nj-navbar.nj-navbar--fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--nj-semantic-elevation-z-index-fixed);
    }