Gravity
  • Welcome to Gravity
  • Getting Started
  • Stack
  • Updates
  • Rules For AI
  • Troubleshooting
  • Gravity Server
    • Introduction
    • Installation
      • Install Node.js
      • Database Setup
      • Stripe Setup
      • Mailgun Setup
      • Install Gravity
    • Application Structure
    • REST API
      • API Scopes
      • Webhooks
    • Authentication
      • Email Verification
      • Social Sign On
      • Two-Factor Authentication
    • Authorization
      • Feature Access and Plan Restrictions
      • Permissions (Roles)
    • Config
    • Environment Variables
    • Database Queries
    • Handling Errors
    • Logging
    • Localization
    • Push Notifications
    • Email Notifications
    • User Feedback
    • User Onboarding
    • File Uploads
    • Billing
      • Seat Billing
      • Usage Billing
    • Free Accounts
    • CLI Toolbelt
    • Testing
    • AI Tools
    • Background Jobs
    • Deployment
  • Gravity Web
    • Introduction
    • Tailwind & SCSS
    • Routing
    • Events
    • Authentication
    • Localization
    • Hooks
      • useAPI
      • usePlans
      • usePermissions
    • Components
      • Alert
      • Animate
      • Avatar
      • Badge
      • Breadcrumb
      • Button
      • Calendar
      • Card
      • Chart
      • Checklist
      • Credit Card
      • Detail
      • Dialog
      • Dropdown
      • Feedback
      • Form
      • Grid
      • Header
      • Helper
      • Icon
      • Image
      • Layout
      • Link
      • List
      • Loader
      • Logo
      • Nav
      • Onboarding
      • Pagination
      • Popover
      • Progress
      • Row
      • Search
      • Separator
      • Sheet
      • Social
      • Stat
      • Table
      • Tabs
      • Toast (Notification)
      • Tooltip
      • User
      • View
    • Views
    • Handling Errors
    • Deployment
  • Gravity Native
    • Introduction
    • Prerequisites
    • Installation
    • App Context
    • Authentication
    • Localisation
    • External Linking
    • Handling Errors
    • Navigation
    • Config
    • Events
    • Views
    • Components
      • Badge
      • Blankslate
      • Button
      • Card
      • Chart
      • Form
      • Global
      • Grid
      • Icon
      • List
      • Logo
      • Message
      • Modal
      • Nav
      • Notification
      • Progress Bar
      • Search
      • Separator
      • Social
      • Stat
      • View
    • Push Notifications
    • Payments
    • Building Your App
  • Mission Control
    • Introduction
    • Installation
    • User Management
    • Feedback
    • Events
    • Logs
  • Website Template
    • Introduction
    • Environment Variables
    • Styling
    • Components
      • Article
      • Feature List
      • Footer
      • Hero
      • Layout
      • Pricing
      • Meta Data
      • Nav
      • Testimonial
    • Build and Deploy
Powered by GitBook
On this page
  • Vertical Nav
  • Preview
  • Usage
  • Props
  • Notes
  • Drawer Nav
  • Preview
  • Usage
  • Props
  • Notes
  • Sub Nav
  • Preview
  • Usage
  • Props
  • Notes

Was this helpful?

  1. Gravity Web
  2. Components

Nav

PreviousLogoNextOnboarding

Last updated 10 months ago

Was this helpful?

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.


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.

For more details, refer to the

Shadcn Sheet documentation.
Gravity vertical nav component
Gravity drawer nav component
Gravity sub nav component