igx-navbar is position on top and represents current state and enables a user defined action. A walkthrough of how to get started can be found here

Usage

Simple Navbar

<igx-navbar title="Settings">
</igx-navbar>

You can be more descriptive and set title title="User settings".

Navbar with back button

<igx-navbar title="Settings"
            actionButtonIcon="arrow_back"
            [isActionButtonVisible]="canGoBack()"
            (action)="navigateBack()">
</igx-navbar>

You can set the id of the component by id="myNavbar" or will be automatically generated;

You can set the title of the navbar by setting title="Settings";

You can set the action button icon of the navbar by setting actionButtonIcon="arrow_back";

You can set the visible state of the navbar by setting isActionButtonVisible="true";

You can set the action of the navbar button by setting (action)="executeAction()";

Navbar with custom action icon

The navbar component provides us with the ability to use a template for the action icon instead of the default one. This can be done by simply using the igx-action-icon tag.

<igx-navbar title="Settings"
            actionButtonIcon="arrow_back"
            [isActionButtonVisible]="canGoBack()"
            (action)="navigateBack()">
    <igx-action-icon>
        Navigate back:
        <igx-icon>arrow_back</igx-icon>
    </igx-action-icon>
</igx-navbar>

If a custom igx-action-icon is provided, the default action icon will not be used.