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.


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 (
title: 'Home',
itemId: '/home',
onChange={({event, item}) => {
// prevent page reload
export default withRouter(App);


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.


Side Navigation props

Side Navigation exports

You can import this module like so:

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

It exports the following components or utility functions: