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.

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