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

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
$ReadOnly
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>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
NavItemContainer { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
NavLink { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
NavItem { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
SubNavContainer { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

renderItem nullable function = null

Optional render function that is called instead default item rendering

function
*,
$active boolean required
$level number required
$selectable boolean required
&
onSelect function
item exists required *
event union required One of
Event,
KeyboardEvent
=> mixed
onClick function Event => mixed
onKeyDown function KeyboardEvent => mixed
=> Node

mapItem nullable function = null

Optional transform function that is called for each Item

$ReadOnly
title required Node
itemId string
subnav arrayType Array
Item
=> $ReadOnly
title required Node
itemId string
subnav arrayType Array
Item