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.

You can also implement your own renderItem if you need even more flexibility.

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);

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!

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

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