The Ignite UI for Angular Navigation Bar component informs the user of their current position in an app, and helps them move back (much like the “back” button in a browser). The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. The bar sits at the top of the container it is placed in.

Usage

To get started with the Ignite UI for Angular NavBar component, let's first import the IgxNavbarModule in our app.module.ts file:

// app.module.ts

...
import { IgxNavbarModule } from 'igniteui-angular';

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

Then in the template of our component we can add the following code to show a basic navbar with a title only:

<!--navbar.component.html-->

<igx-navbar title="Sample App">
</igx-navbar>

With back button

Good, we know which application we have opened. Now, let's see what capabilities it offers us by exploring its menu. To achieve this we will show the action button and make it use a menu icon as follows:

<!--navbar.component.html-->

<igx-navbar title="Sample App"
    actionButtonIcon="menu"
    [isActionButtonVisible]="true">
</igx-navbar>

If all went well, you should see the following in your browser:

Adding Icons

Now that our app has its menu in place, we can make it a little more functional by adding options for searching, favorites and more. To do that let's grab the IgxIcon module and import it in our app.module.ts file.

// app.module.ts

...
import {
    IgxNavbarModule,
    IgxIconModule
} from 'igniteui-angular';

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

Next, we need to update our template with an icon for each of the options we want our app to provide:

<!--navbar.component.html-->

 <igx-navbar title="Sample App" actionButtonIcon="menu">
    <igx-icon name="search"></igx-icon>
    <igx-icon name="favorite"></igx-icon>
    <igx-icon name="more_vert"></igx-icon>
</igx-navbar>

API Summary

In this article we show a few scenarios where the navbar component may come in handy. The APIs, we used to achieve them, are listed below.

Inputs

The following inputs are available on the igx-navbar component:

Name Type Description
actionButtonIcon String Provide the name of the material icon to be used in the action button.
isActionButtonVisible Boolean Whether the action button should be displayed.
title String Provide the title the navbar should display.

Outputs

The following outputs are available on the igx-navbar component:

Name Type Description
onAction EventEmitter Emits an event when the action is executed.

Additional Resources

Our community is active and always welcoming to new ideas.