# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/nav.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.