You can use our Drop Down, Combo or even the native Select element to place it in the navbar. In addition, the isAdmin property of the underlying currentUser object can be used in order to display the element conditionally.

For example:

<igx-navbar #navbar actionButtonIcon="menu" [title]="currentUser.title">
...
<!-- =========== IgxCombo =========== -->
<igx-combo *ngIf="currentUser.isAdmin" class="combo" [data]="localData" height="30px">
</igx-combo>

<!-- =========== IgxDropdown =========== -->
<div *ngIf="currentUser.isAdmin" >
<button igxButton="raised" (click)="toggleDropDown($event)">Options</button>
<igx-drop-down #dropdown1 class="dropdown">
<igx-drop-down-item [igxDropDownItemNavigation]="dropdown1" *ngFor="let val of localData">
{{ val }}
</igx-drop-down-item>
</igx-drop-down>
</div>

<!-- =========== Native Dropdown =========== -->
<select *ngIf="currentUser.isAdmin" >
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
...
</igx-navbar>

Please note that in order for the default overlay element of both the IgxDropDown and the IgxCombo to be displayed on top of the navbar, we will currently have to include a global level style for the overlay:

styles.css:

.igx-overlay {
position: relative;
z-index: 24;
}

The IgxIcon material design icons you have referred to are merely an example for what kind of content can be placed in the navbar. They do not have a predefined specific functionality (they are just icons) and you can use them to implement logic of your own.

I have attached a sample application that demonstrates the code-snippet approach from above.
If you have any questions, please let me know.

5756.navbar-modified.zip

Hello Dinesh,

The igx-navbar component can provide any information based on the way it is implemented the application.

You can always change the content of the navbar based on a certain binding and the properties' values that are received.
One approach you can use is to bind the navbar's properties to a specific currentUser object's properties. This will allow you to change the navbar's content based on what information the currentUser has.

HTML:

<igx-navbar actionButtonIcon="menu" [title]="currentUser.title">
  <igx-icon *ngFor="let iconName of currentUser.icons">
    {{iconName}}
  </igx-icon>
  <igx-icon name="more_vert"></igx-icon>
</igx-navbar>

Typescript:

public users: IUser[];
public currentUser: IUser;

public ngOnInit() {
  this.users = [
    {
      title: "John Doe (Administrator)",
      isAdmin: true,
      icons: ["search", "settings", "settings_ethernet", "settings_remote"]
    },
    {
      title: "Jane Doe",
      isAdmin: false,
      icons: ["search", "favorite", "call"]
    }
  ];

  this.currentUser = this.users[0];
}
}

export interface IUser {
title: string;
isAdmin: boolean;
icons: string[];
}

I have attached a sample application that demonstrates the approach from above.
Please note that this is a simple example to implementing the functionality you are looking for and since these types of logics are based on the specifics of your application, any further (or different) implementation would have to be manually handled.

For more details on using the Navbar, you can take a look at the following topic.

If you have any questions, please let me know.

4375.igx-navbar.zip