Nav

Gravity provides four navigation menu types that work across mobile and desktop devices.

Vertical Nav

The VerticalNav component is the primary desktop navigation used inside the main app. It displays navigation items with optional tooltips and is designed for large screen sizes.

Preview

Usage

import { VerticalNav } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <VerticalNav
      items={[
        { label: 'Dashboard', icon: 'activity', link: '/dashboard', position: 'top' },
        { label: 'Account', icon: 'user', link: '/account', position: 'top' },
        { label: 'Sign Out', icon: 'log-out', action: signout, position: 'bottom' }
      ]}
    />
  )
}

Props

Prop	Description	Required	Value
items	array of navigation items	required	array of objects ({ label: string, link: string, icon: string, position: string })

Notes

• The VerticalNav component uses the NavLink from react-router-dom for navigation links.

• The Logo, Button, Icon, Tooltip, TooltipTrigger, and TooltipContent components from 'components/lib' are used for rendering the navigation items with tooltips.

• The items prop specifies the navigation items, each containing a label, link, icon, and position.

• The position property in each item determines whether the item is placed at the top or bottom of the navigation.

---

Drawer Nav

The DrawerNav component is the primary mobile navigation used inside the main app. It displays navigation items within a drawer that can be opened and closed.

Preview

Usage

import { VerticalNav } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <DrawerNav
      items={[
        { label: 'Dashboard', icon: 'activity', link: '/dashboard' },
        { label: 'Account', icon: 'user', link: '/account' },
        { label: 'Sign Out', icon: 'log-out', action: signout }
      ]}
    />
  )
}

Props

Prop	Description	Required	Value
items	array of navigation items	required	array of objects ({ label: string, link: string, icon: string, position: string })

Notes

• The DrawerNav component uses the Sheet, SheetClose, Button, Icon, Logo, and NavLink components from 'components/lib'.

• The items prop specifies the navigation items, each containing a label, link, icon, and position.

• The Sheet component provides the drawer functionality.

• For more details, refer to the Shadcn Sheet documentation.

---

Sub Nav

The SubNav component is a sub-navigation element that displays a list of navigation items. It supports permission-based item visibility and is fully responsive; displaying a select input on mobile, a horizontal bar on medium sized screens and a vertical sidebar on larger screens.

Preview

Usage

import { SubNav } from 'components/lib';

function MyComponent({ ...props }){

  const subnav = [
    { label: 'Profile', link: '/account/profile', icon: 'user', permission: 'user' },
    { label: 'Password', link: '/account/password', icon: 'lock', permission: 'user' },
    { label: 'Billing', link: '/account/billing', icon: 'credit-card', permission: 'owner' },
    { label: 'API Keys', link: '/account/apikeys', icon: 'key', permission: 'developer' },
    { label: 'Users', link: '/account/users', icon: 'users', permission: 'admin' }
  ]

```

  return (
    <div>
      <SubNav items={ items } />
    </div>
  );
}

Props

Prop	Description	Required	Value
transparent	array of navigation items	optional	array of objects ({ label: string, link: string, icon: string, permission?: string })

Notes

• The SubNav component uses NavLink from react-router-dom for navigation links.

• The AuthContext is used to handle permission-based item visibility.

• The Select component allows for navigation via a dropdown on smaller screens.

• The Icon component is used to display icons for each navigation item.

• The location and navigate hooks from react-router-dom are used for managing navigation.