Angular Navbar Component Overview
The Ignite UI for Angular IgxNavbarComponent
is an application header component that 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.
Angular Navbar Example
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Navbar
To get started with the Ignite UI for Angular Navbar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
cmd
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The first step is to import the IgxNavbarModule
inside our app.module.ts file.
// app.module.ts
import { IgxNavbarModule } from 'igniteui-angular';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxNavbarModule],
...
})
export class AppModule {}
typescript
Alternatively, as of 16.0.0
you can import the IgxNavbarComponent
as a standalone dependency, or use the IGX_NAVBAR_DIRECTIVES
token to import the component and all of its supporting components and directives.
// home.component.ts
import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-navbar title="Ignite UI for Angular"></igx-navbar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_NAVBAR_DIRECTIVES],
/* or imports: [IgxNavbarComponent] */
})
export class HomeComponent {}
typescript
Now that you have the Ignite UI for Angular Navbar module or directives imported, you can start using the igx-navbar
component.
Using the Angular Navbar
Then in the template of our component we can add the following code to show a basic navbar with a title:
<!--navbar.component.html-->
<igx-navbar title="Ignite UI for Angular"> </igx-navbar>
html
Add Menu Button
In order to add a menu button, we will show the action button using the actionButtonIcon
property, and make it use a menu icon as follows:
<!--navbar.component.html-->
<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true"></igx-navbar>
html
The actionButtonIcon
uses the Material fontset by design.
Add Icon Buttons
We can make our app a little more functional by adding options for searching, favorites and more. To do that let's grab the IgxIconButton and IgxIcon modules and import them in our app.module.ts file.
// app.module.ts
...
import { IgxNavbarModule, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxIconButtonDirective, IgxIconModule],
})
export class AppModule {}
typescript
Next, we need to update our template with an icon button for each of the options we want our app to provide:
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
html
If all went well, you should see the following in your browser:
Add Custom Action
What if we want to use a custom template for our app navigation on the left-most part of the navbar? We can easily achieve this by using the igx-navbar-action
directive, which will render the content we have provided. We will do that by using a button with the Font Awesome home icon.
/* navbar.component.css */
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
css
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
</igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
html
Finally, this is how our navbar should look like with its custom action button icon:
Add Navigation Icon
If we want to create a navbar with an icon navigating back, we should follow a couple of steps. First, we can use the actionButtonIcon
property to choose a suitable icon from the Material fontset. Then, we can make a simple check if there are any previously visited pages to go back to, and pass the result to the isActionButtonVisible
property. The last step is to create a method for navigating back and hook it to the action
property.
<!--navbar.component.html-->
<igx-navbar
title="Ignite UI for Angular"
actionButtonIcon="arrow_back"
[isActionButtonVisible]="canGoBack()"
(action)="navigateBack()"
>
</igx-navbar>
html
export class NavbarSample3Component {
constructor(private _location: Location) {}
public ngOnInit() {}
public navigateBack() {
this._location.back();
}
public canGoBack() {
return window.history.length > 0;
}
}
typescript
If the sample is configured properly, you should see the following in your browser:
If igx-navbar-action
or igxNavbarAction
is provided, the default actionButtonIcon
will not be used.
Add Custom Title
If we want to provide a custom content for a navbar's title, we can achieve this by using igx-navbar-title
or igxNavbarTitle
directive. They will replace the default navbar's title provided by title
input property. The sample below has a custom title containing a link with an image:
<!--navbar.component.html-->
<div class="sample-column">
<igx-navbar>
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>menu</igx-icon>
</button>
</igx-navbar-action>
<div igxNavbarTitle>
<a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank">
<img
src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
width="120px"
height="50px"
alt
style="margin-top: 7px;"
/>
</a>
</div>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
</div>
html
If igx-navbar-title
or igxNavbarTitle
is provided, the default title
will not be used.
Styling
To get started with styling the navbar, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Following the simplest approach, we create a new theme that extends the navbar-theme
and accepts the $text-color
, $background
, $idle-icon-color
and the $hover-icon-color
parameters.
$custom-navbar-theme: navbar-theme(
$text-color: #151515,
$background: #dedede,
$idle-icon-color: #151515,
$hover-icon-color: #8c8c8c,
);
scss
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette
and color
functions. Please refer to Palettes
topic for detailed guidance on how to use them.
The last step is to pass the newly created theme to the css-vars
mixin:
@include css-vars($custom-navbar-theme);
scss
Demo
API References
Additional components and/or directives with relative APIs that were used: