Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (97 sloc) 2.94 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import SideNavBasic from 'examples/side-navigation/basic.js'; import NavOverrides from 'examples/side-navigation/nav-overrides.js';

import Overrides from '../../components/overrides'; import {Navigation} from 'baseui/side-navigation'; import * as NavExports from 'baseui/side-navigation';

export default Layout;

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.

<Example title="Side navigation basic usage" path="side-navigation/basic.js"

<Example title="Side navigation with overrides" path="side-navigation/nav-overrides.js"

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.

Overrides

<Overrides name="Side Navigation" component={NavExports} renderExample={props => ( <Navigation items={[ { title: 'Colors', itemId: '#level1.1', subnav: [ { title: 'Primary', itemId: '#level1.1.1', }, { title: 'Shades', itemId: '#level1.1.2', }, ], }, { title: 'Sizing', itemId: '#level1.2', }, ]} activeItemId="#level1.1" overrides={props.overrides} {...props} /> )} />

<API heading="Side Navigation API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/side-navigation/nav.js')} />

You can’t perform that action at this time.