Edit this page

Side Navigation

The side navigation menu is a list of links that is used for a website navigation. The side navigation can provide a multi-level structure.

Examples

Side navigation basic usage

Side navigation with overrides

React Router

By default, the Navigation component uses <a href> and reloads the page. When you use JavaScript based routing (for example react-router), you need to prevent the default action via e.preventDefault() first.

import {withRouter} from 'react-router';
const App = ({history, location}) => {
  return (
    <Navigation
      items={[
        {
          title: 'Home',
          itemId: '/home',
        },
      ]}
      activeItemId={location.pathname}
      onChange={({event, item}) => {
        // prevent page reload
        event.preventDefault();
        history.push(item.itemId);
      }}
    />
  );
};
export default withRouter(App);

Performance

If you are experiencing performance issues from rendering hundreds of items, consider adding a comparator function through the itemMemoizationComparator prop. This function is provided to a React.memo call on the NavItem component. See React's documentation for more information on how this works. Take care to ensure that you diff all of the props you care about. While powerful, intervening in React's default update schedule can lead to unexpected results.

Overrides

Additionally, you can fully customize any part of the Side Navigation through the overrides prop. The Side Navigation consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Side Navigation API

activeItemId string = "/"

Defines the current active itemId. Used for the default calculation of the $active prop

activePredicate nullable function = null

Is called on the nav item render to test if the item is currently selected. If returns true the item will be rendered as an active one

function
*,
string
=> boolean

items arrayType = []

List of navigation items

Array
title required Node
itemId string
subNav arrayType Array
Item

itemMemoizationComparator function

Used as a performance optimization if many nav items are rendered. Function provided to NavItem component's React.memo call.

function
$active boolean required
$level number required
$selectable boolean required
&
item required
title required Node
itemId string
subNav arrayType Array
Item
itemMemoizationComparator function function
NavItemPropsT,
NavItemPropsT
=> boolean
onSelect function
item exists required *
event union required One of
Event,
KeyboardEvent
 => mixed
overrides object required
NavLink { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NavItem { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
,
$active boolean required
$level number required
$selectable boolean required
&
item required
title required Node
itemId string
subNav arrayType Array
Item
itemMemoizationComparator function function
NavItemPropsT,
NavItemPropsT
=> boolean
onSelect function
item exists required *
event union required One of
Event,
KeyboardEvent
 => mixed
overrides object required
NavLink { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NavItem { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
=> boolean

onChange function

onChange handler that is called when a nav item is selected

item exists required *
event union required One of
Event,
KeyboardEvent
 => mixed

overrides object = {}

Overrides for the internal elements and components

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NavItemContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NavLink { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NavItem { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
SubNavContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

mapItem nullable function = null

Optional transform function that is called for each Item

title required Node
itemId string
subNav arrayType Array
Item
 =>
title required Node
itemId string
subNav arrayType Array
Item

Side Navigation exports

You can import this module like so:

import {Navigation} from 'baseui/side-navigation'

It exports the following components or utility functions:

  • Navigation
  • NavItem
  • StyledRoot
  • StyledNavItemContainer
  • StyledNavLink
  • StyledNavItem
  • StyledSubNavContainer