Web Components Navbar Overview

    The Ignite UI for Web Components 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.

    Web Components Navbar Example

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd
    import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent);
ts

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

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

    <igc-navbar>Navigation Title</igc-navbar>
html
    Ignite UI for Web Components | CTA Banner

    Content

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Styling

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

    Name Description
    base The base wrapper of the navigation bar.
    start The left aligned icon container.
    middle The navigation bar title container.
    end The right aligned action icons container. 
    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);;
}
css

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

    EXAMPLE
    TS
    HTML
    index.css
    NavbarStyling.css
    Edit in:

    API References

    Additional Resources