React Navbar Overview

The Ignite UI for React Navbar informs the user of their current position in an app. 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.

React Navbar Example

The following example represents a IgrNavbar with icons and text header:

Usage

Before using the IgrNavbar, you need to register it as follows:

For a complete introduction to the Ignite UI for React, read the Getting Started topic.

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrNavbar and its necessary CSS like so:

import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Then in the template of IgrNavbar, you can add the following code to show a basic IgrNavbar with a title only:

<IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

Content

You can enhance the IgrNavbar component by adding IgrIcon or other components at the start or end position as content, allowing users to navigate to key positions directly from the bar:

 <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

Styling

The IgrNavbar component exposes several CSS parts, giving you full control over its style:

igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

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

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub