Nav

App Nav

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

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

Props

prop

description

value

type

the display type on mobile

fixed (bottom) or popup

items

list of links

array of objects

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

Props

prop

description

value

items

list of item names and urls

object array

Home Nav

Used for the main website and auth pages. Renders a dashboard link if the user is signed in, or a sign up link if not.

<HomeNav />

Hover Nav

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

<HoverNav icon='user' label='Hover me!' align='left'>
<Button text='Account Settings' action={ e => window.location = '/account' }/>
<Button text='Signout' action={ context.signout }/>
</HoverNav>

Props

prop

description

value

color

background color of the revealed nav

dark or light

label

the hotspot text

string

icon

icon image (optional)

true or false

align

alignment position of the revealed nav

left or right

Renders a sub navigation element underneath the header.

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

Props

prop

description

value

items

list of item labels and urls

object array