Side Navigation

Loading
API

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.

API

Side Navigation props

activeItemId
string
Currently selected item id.
activePredicate
function
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.
items
array
Navigation items to render.
mapItem
function
Optional transform function that is called for each Item.
onChange
function
Called when item is clicked.
overrides
custom
Lets you customize all aspects of the component.

Side Navigation exports

You can import this module like so:

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

It exports the following components or utility functions: