Gravity
Search
K

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
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
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
Last modified 5mo ago