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:

    EXAMPLE
    TSX

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    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
    cmd

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

    import { IgrNavbarModule, IgrNavbar } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrNavbarModule.register();
    tsx
    <IgrNavbar>
        <span>Navigation Title</span>
    </IgrNavbar>
    tsx
    Ignite UI for React | CTA Banner

    Content

    You can added some IgrIcon elements using the Start and End slots to theIgrNavbar as it is shown in the following sample:

    EXAMPLE
    TSX

    Styling

    The Navigation Bar component exposes several CSS parts (base, start, middle and end) to give you full control over its styling.

    igc-icon {
        color: currentColor;
    }
    
    igc-navbar {
        background-color: #232121
    }
    
    igc-navbar::part(start) {
        color: #f23269;
    }
    
    igc-navbar::part(middle) {
        font-family: Titillium Web,sans-serif;
        color: #e9e8ea
    }
    
    igc-navbar::part(end) {
        color: #e9e8ea
    }
    css

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

    EXAMPLE
    TSX
    CSS

    API References

    Additional Resources