@myntra/uikit-component-nav-bar v1.13.96

import NavBar from './src/nav-bar'

NavBar

<NavBar title="My Application">
  <NavBar.Item icon={InfoCircleSolid}>Dice 1</NavBar.Item>
  <NavBar.Item icon={BoxSolid}>Dice 2</NavBar.Item>

  <NavBar.Group title="Dices" icon={AtSolid}>
    <NavBar.Item icon={Bell}>Dice 5</NavBar.Item>
    <NavBar.Item icon={InfoCircleSolid}>Dice 1</NavBar.Item>
  </NavBar.Group>
</NavBar>

Examples & Use Cases

Browser Navigation

<NavBar title="Components" currentPath={window.location.pathname}>
  <NavBar.Item to="/components/avatar" renderIcon={() => <Avatar name="Avatar" />}>
    Avatar
  </NavBar.Item>
  <NavBar.Item to="/components/button" renderIcon={() => <Avatar name="Button" />}>
    Button
  </NavBar.Item>
  <NavBar.Item to="/components/nav-bar" renderIcon={() => <Avatar name="NavBar" />}>
    NavBar
  </NavBar.Item>
</NavBar>

Custom Navigation

const [location, setLocation] = useState('/foo');

<NavBar title="Hypothetical" currentPath={location} renderLink={({ children }) => children}>
  <NavBar.Item to="/foo" icon={BoxSolid} onClick={() => setLocation('/foo')}>Foo</NavBar.Item>
  <NavBar.Item to="/bar" icon={ClockRegular} onClick={() => setLocation('/bar')}>Bar</NavBar.Item>
  <NavBar.Item to="/baz" icon={ClockRegular} onClick={() => setLocation('/baz')}>Baz</NavBar.Item>
</NavBar>

Integration with ReduxFirstRouter

import Link from 'redux-first-router-link'
import { connect } from 'react-redux'

function MyApplication({ currentPath }) {
  return (
    <NavBar
      currentPath={currentPath}
      renderLink={({ href, children }) => (
        <Link to={href} tabIndex={-1}>{children}</Link>
      )}>
      ...
    </NavBar>
  )
}

export default connect(
  state => ({
    currentPath: state.router.location.type
  })
)(MyApplication)

Notes to Designers

• Do not add more than 7 top level nav links.

Notes to Developers

• If you are rendering any focusable item in <NavBar.Item>, make sure to add tabIndex="-1" to prevent duplicate tab key trap in same item.

  <NavBar.Item>
    <a href="#top" tabIndex="-1">Scroll to top</a>
  </NavBar.Item>

Sub-components

NavBar.Group

<NavBar title="My Application">
  <NavBar.Group title="Dices" icon={AtSolid}>
    <NavBar.Item icon={Bell}>Dice 5</NavBar.Item>
    <NavBar.Item icon={InfoCircleSolid}>Dice 1</NavBar.Item>
  </NavBar.Group>

  <NavBar.Group title="Accessible Devices" icon={BoxSolid}>
    <NavBar.Item icon={Bell}>Bell</NavBar.Item>
    <NavBar.Item icon={ClockRegular}>Clock</NavBar.Item>
  </NavBar.Group>
</NavBar>

NavBar.Item

<NavBar title="My Application">
  <NavBar.Item renderIcon={() => <Avatar name="Foo" />}>Foo</NavBar.Item>
  <NavBar.Item renderIcon={() => <Avatar name="Bar" />}>Bar</NavBar.Item>
</NavBar>