Nav

There are four navigation types included for you to use.

App Nav

The <AppNav/> is the primary fly-out navigation element used in the app. The nav is designed to work on both desktop and mobile.

Preview

Code

<Nav
  items={[
    { name: 'Dashboard', icon: 'activity', link: '/dashboard' },
    { name: 'Account', icon: 'user', link: '/account' }
  ]}
/>

Props

Prop	Description	Required	Value
items	list of links	required	array

Breadcrumb Nav

Navigation trail for nested pages.

Preview

Code

<Breadcrumbs items={[
  { name: 'Products', url: '/products' },
  { name: 'Software', url: '/software' },
  { name: 'SaaS', url: '/saas/' }
]}/>

Props

Prop	Description	Required	Value
items	list of item name and urls	required	array

Auth Nav

Used for the auth pages. Renders a dashboard link if the user is signed in, or a sign-in button if not.

Preview

Code

<AuthNav />

Props

Prop	Description	Required	Value
transparent	apply a transparent background color	optional	boolean

Hover Nav

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

Preview

Code

<HoverNav label='Hover me!' align='left' icon='chevron-down'>
  <Button text='This Account' action={ context.switch }/>
  <Button text='Other account' action={ context.switch }/>
</HoverNav>

Props

Prop	Description	Required	Value
align	align left or right	required	left or right
className	custom styles	optional	SCSS or Tailwind style
label	the hotspot text	required	string
icon	icon image	optional	boolean

Sub Nav

Renders a sub navigation element underneath the header.

Preview

Code

<SubNav items={[
  { label: 'Account' url: '/account', },
  { label: 'Billing' url: '/billing', },
]}/>

Props

prop	description	value
items	list of item labels and urls	array