Gravity
Search…
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.
1
<Nav
2
type='fixed'
3
items={[
4
{ name: 'Dashboard', icon: 'activity', link: '/dashboard' },
5
{ name: 'Account', icon: 'user', link: '/account' }
6
]}
7
/>
Copied!

Props

prop
description
value
type
the display type on mobile
fixed (bottom) or popup
items
list of links
array of objects
1
<Breadcrumbs items={[
2
{ name: 'Products', url: '/products' },
3
{ name: 'Software', url: '/software' },
4
{ name: 'SaaS', url: '/saas/' }
5
]}/>
Copied!

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.
1
<HomeNav />
Copied!

Hover Nav

Reveals a nav when the user hovers over a hotspot. Items are rendered as children.
1
<HoverNav icon='user' label='Hover me!' align='left'>
2
<Button text='Account Settings' action={ e => window.location = '/account' }/>
3
<Button text='Signout' action={ context.signout }/>
4
</HoverNav>
Copied!

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.
1
<SubNav items={[
2
{ label: 'Account' url: '/account', },
3
{ label: 'Billing' url: '/billing', },
4
]}/>
Copied!

Props

prop
description
value
items
list of item labels and urls
object array
Last modified 1yr ago