Base Web - Application navigation bar

title

"Title"

"Title"

onMainItemSelect

(item) => {
 setMainItems(prev =>
   setItemActive(prev, item)
 )
}

(item) => {
 setMainItems(prev =>
   setItemActive(prev, item)
 )
}

username

usernameSubtitle

"5 Stars"

"5 Stars"

userImgUrl

onUserItemSelect

item => console.log(item)

item => console.log(item)

import * as React from "react";
import {
  AppNavBar,
  setItemActive
} from "baseui/app-nav-bar";
import {
  ChevronDown,
  Delete,
  Overflow,
  Upload
} from "baseui/icon";

export default () => {
  const [mainItems, setMainItems] = React.useState([
    { icon: Upload, label: "Main A" },
    {
      active: true,
      icon: ChevronDown,
      label: "Main B",
      navExitIcon: Delete,
      children: [
        { icon: Upload, label: "Secondary A" },
        { icon: Upload, label: "Secondary B" }
      ]
    }
  ]);
  return (
    <AppNavBar
      title="Title"
      mainItems={mainItems}
      onMainItemSelect={item => {
        setMainItems(prev => setItemActive(prev, item));
      }}
      username="Umka Marshmallow"
      usernameSubtitle="5 Stars"
      userItems={[
        { icon: Overflow, label: "User A" },
        { icon: Overflow, label: "User B" }
      ]}
      onUserItemSelect={item => console.log(item)}
    />
  );
}

import * as React from "react";
import {
  AppNavBar,
  setItemActive
} from "baseui/app-nav-bar";
import {
  ChevronDown,
  Delete,
  Overflow,
  Upload
} from "baseui/icon";
export default () => {
  const [mainItems, setMainItems] = React.useState([
    { icon: Upload, label: "Main A" },
    {
      active: true,
      icon: ChevronDown,
      label: "Main B",
      navExitIcon: Delete,
      children: [
        { icon: Upload, label: "Secondary A" },
        { icon: Upload, label: "Secondary B" }
      ]
    }
  ]);
  return (
    <AppNavBar
      title="Title"
      mainItems={mainItems}
      onMainItemSelect={item => {
        setMainItems(prev => setItemActive(prev, item));
      }}
      username="Umka Marshmallow"
      usernameSubtitle="5 Stars"
      userItems={[
        { icon: Overflow, label: "User A" },
        { icon: Overflow, label: "User B" }
      ]}
      onUserItemSelect={item => console.log(item)}
    />
  );
}

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.

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

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.

You can import this module like so:

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

It exports the following components or utility functions:

Application navigation bar

Examples

Basic example

Custom menu item

Non unique labels

API

AppNavBar

Navigation bar exports