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' }
]}
/>
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/' }
]}/>
prop | description | value |
items | list of item names and urls | object array |
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 />
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>
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', },
]}/>
prop | description | value |
items | list of item labels and urls | object array |
Last modified 2yr ago