Ignite UI for Angular Navbar - Documentation

The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation state such as a "Go Back" button. It also supports other actions represented by icons.

Example:

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

IgxNavbarComponent

new IgxNavbarComponent(): IgxNavbarComponent

Returns IgxNavbarComponent

The event that will be thrown when the action is executed, provides reference to the IgxNavbar component as argument

public actionExc(event){
    alert("Action Execute!");
}
 //..
<igx-navbar (action)="actionExc($event)" title="Sample App" actionButtonIcon="menu">
action: EventEmitter<IgxNavbarComponent>

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:100

Sets the icon of the IgxNavbarComponent.

<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar>
actionButtonIcon: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:77

Sets the value of the id attribute. If not provided it will be automatically generated.

<igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu">
id: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:69

Sets the title of the IgxNavbarComponent.

<igx-navbar title="Sample App" actionButtonIcon="menu">
title: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:85

Sets the titleId of the IgxNavbarComponent. If not set it will be automatically generated.

<igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu">
titleId: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:109

isActionButtonVisible: boolean

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:131, projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:146

get isTitleContentVisible(): boolean

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:153

Returns boolean