Application navigation bar
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
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.
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.
API
AppNavBar
Name | Type | Description |
---|---|---|
mainItems | array | List of the primary navigation items. |
onMainItemSelect | function | Handler called when a menu item is selected. |
onUserItemSelect | function | Handler called when a menu item is selected. |
overrides | custom | Lets you customize all aspects of the component. |
title | react node | Navigation bar title, application name, or logo. |
userImgUrl | string | User profile image link. |
userItems | array | List of the user profile navigation items. |
username | string | User profile name. |
usernameSubtitle | react node | User profile description or additional information. |
Navigation bar exports
You can import this module like so:
import {AppNavBar} from 'baseui/app-nav-bar'
It exports the following components or utility functions:
- AppNavBar
- POSITION
- setItemActive
- StyledRoot
- StyledSubnavContainer
- StyledSpacing
- StyledAppName
- StyledSideMenuButton
- StyledPrimaryMenuContainer
- StyledMainMenuItem
- StyledSecondaryMenuContainer
- StyledUserMenuButton
- StyledUserMenuProfileListItem
- StyledUserProfileTileContainer
- StyledUserProfilePictureContainer
- StyledUserProfileInfoContainer