> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/nav.md).

# 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

<div align="left"><figure><img src="/files/cEMy9BNQbkalqzSezk3G" alt="Gravity vertical nav component" width="375"><figcaption></figcaption></figure></div>

### Usage

```javascript
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

<div align="left"><figure><img src="/files/kNatNzg7j1UaOEArpbHh" alt="Gravity drawer nav component" width="370"><figcaption></figcaption></figure></div>

### Usage

```javascript
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.](https://ui.shadcn.com/docs/components/sheet)

***

## 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.&#x20;

### Preview

<div align="left"><figure><img src="/files/zkUKiVtNaWkFsr365vlr" alt="Gravity sub nav component" width="563"><figcaption></figcaption></figure></div>

### Usage

````javascript
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.