Navigation

App Nav

The primary navigation element used in the internal web application. The nav is designed to work on both desktop and mobile using either a fixed nav at the bottom or sliding from the side on mobile.

Properties

  • type - fixed or slideout
  • items - array of objects containing name and link values
<AppNav
  type='fixed'
  items={[
    { name: 'Dashboard', link: '/dashboard' },
    { name: 'Account', link: '/account', hasSubNav: true }
  ]}
/>

Breadcrumb Nav


Properties

  • items - array of objects containing name and url values
<Breadcrumbs items={[
  { name: 'Products', url: '/products' },
  { name: 'Software', url: '/software' },
  { name: 'SaaS', url: '/saas/' }
]}/>

Home Nav

Used for the main website and auth pages. Renders a dashboard link if the user is logged in, or a sign up link if they aren't.

<HomeNav />

Hover Nav

Reveal a nav when the user hovers over a hotspot. Items are rendered as children.

Properties

  • color - dark or light (default is dark)
  • label - the hotspot text
  • align - left or right
<HoverNav label='Hover me!' align='left'>
  <Button text='Account Settings' action={ event => window.location = '/account' }/>
  <Button text='Signout' action={ this.context.signout }/>
</HoverNav>

Sub Nav

Renders a sub navigation element underneath the header.

Properties

  • items - array of objects containing url and label
<SubNav items={[
  { label: 'Account' url: '/account', },
  { label: 'Billing' url: '/billing', },
]}/>