Application navigation bar
The navigation bar standartizes and creates a shared navigation experience across the applications and products. It enables users to orient and navigate different sections of applications reliably.
Examples
API
Unstable_AppNavBar
| Name | Type | Description |
|---|---|---|
appDisplayName | react node | Navigation bar title, application name, or logo. |
appDisplayNameLink | string | Alternative text description of the image. |
mainNav | array | List of the primary navigation items. |
onNavItemSelect | function | Handler called when a menu item is selected. |
overrides | custom | Lets you customize all aspects of the component. |
userImgUrl | string | User profile image link. |
userNav | 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 {Unstable_AppNavBar} from 'baseui/app-nav-bar'
It exports the following components or utility functions:
- Unstable_AppNavBar
- POSITION
- StyledRoot
- StyledSubnavContainer
- StyledSpacing
- StyledAppName
- StyledSideMenuButton
- StyledPrimaryMenuContainer
- StyledMainMenuItem
- StyledSecondaryMenuContainer
- StyledUserMenuButton
- StyledUserMenuListItem
- StyledUserProfileTileContainer
- StyledUserProfilePictureContainer
- StyledUserProfileInfoContainer