Layout overview

NbLayoutComponent

Layout container component. When using with Nebular Theme System it is required that all child components should be placed inside.

Basic example of two column layout with header:

Can contain the following components inside:

<nb-layout>
 <nb-layout-header></nb-layout-header>
 <nb-layout-footer></nb-layout-footer>
 <nb-layout-column></nb-layout-column>
 <nb-sidebar></nb-sidebar>
</nb-layout>

Installation

Import NbLayoutModule to your app module.

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

Usage

By default the layout fills up the whole view-port. The window scrollbars are disabled on the body and moved inside of the nb-layout, so that the scrollbars won't mess with the fixed nb-header.

The child components are projected into a flexible layout structure allowing to adjust the layout behavior based on the settings provided.

The layout content (columns) becomes centered when the window width is more than the value specified in the theme variable layout-content-width.

The layout also contains the area on the very top (the first child of the nb-layout), which could be used to dynamically append some components like modals or spinners/loaders so that they are located on top of the elements hierarchy. More details are under the ThemeService section.

The layout component is also responsible for changing application themes. It listens to the themeChange event and change a theme CSS class appended to body. Based on the class appended, specific CSS-theme is applied to the application. More details of the Theme System could be found here Enabling Theme System

A simple layout with footer:

It is possible to ask the layout to center the columns (notice: we added a center attribute to the layout:

<nb-layout center>
  <nb-layout-header>Awesome Company</nb-layout-header>

  <nb-layout-column>
    Hello World!
  </nb-layout-column>

  <nb-layout-footer>Contact us</nb-layout-footer>
</nb-layout>

NbLayoutHeaderComponent

Page header component. Located on top of the page above the layout columns and sidebars. Could be made fixed by setting the corresponding property. In the fixed mode the header becomes sticky to the top of the nb-layout (to of the page). Here's an example:

In a pair with sidebar 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.

Same way you can put both fixed and clipped headers adding creating a sub-header for your app:

NbLayoutColumnComponent

A container component which determines a content position inside of the layout. The layout could contain unlimited columns (not including the sidebars).

By default the columns are ordered from the left to the right, but it's also possible to overwrite this behavior by setting a left attribute to the column, moving it to the very first position:

NbLayoutFooterComponent

Page footer. Located under the nb-layout content (specifically, under the columns). Could be made fixed, becoming sticky to the bottom of the view port (window).