Application navigation bar

Title
Title
API

The navigation bar standardizes and creates a shared navigation experience across the applications and products. It enables users to orient and navigate different sections of applications reliably.

Examples

Basic example

You may need to render some icon or other non-text element in the menu item and the mapItemToNode prop is how to do it. Follow the example below to see how it renders colored borders on the item.

Custom menu item

Title
Title

The AppNavBar component comes with a setItemActive utility that will help manage the active state for you. This utility relies on unique label values to operate but can be customized following the example below.

Non unique labels

Title
Title

You can import this module like so:

import {AppNavBar} from 'baseui/app-nav-bar'

It exports the following components or utility functions: