Blazor Navbar Overview

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

Blazor Navbar Example

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

Usage

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));

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

You will also need to link an additional CSS file to apply the styling to the IgbNavbar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

<IgbNavbar>Navigation Title</IgbNavbar>

Content

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

<IgbNavbar>
    <IgbIcon @ref="@HomeIcon" slot="start" IconName="home" Collection="material" />
    <h3>Sample App</h3>
    <IgbIcon @ref="@SearchIcon" slot="end" IconName="search" Collection="material" />
    ...
</IgbNavbar>

Styling

The IgbNavbar 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 Blazor Forums
• Ignite UI for Blazor GitHub