> 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-native/components/nav.md).

# Nav

The navigation component contains some commonly used nav elements that you can use throughout your application.

## Preview

### Drawer Nav

<div align="left"><figure><img src="/files/grbKHj8CjfkW5UKFtF8K" alt="" width="363"><figcaption></figcaption></figure></div>

### Bottom Tabs

<div align="left"><figure><img src="/files/gqfbANseL700EGm0kSzS" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
To understand how routing works, please read the [Navigation](/gravity-native/navigation.md) section.
{% endhint %}

## Button

A burger-style icon for revealing the drawer nav (see below). This is nested in the header of the [\<View>](/gravity-native/components/view.md) component so it's available on any view with a header.

## Drawer

The drawer component is a custom sliding drawer that's activated by the nav button (above). The drawer nav will only show links to the views that the current user has permission to view.&#x20;

{% hint style="info" %}
You can also swipe right to reveal the drawer nav.
{% endhint %}

There is a sign-out button within the drawer nav. You can customise the appearance and styling of this component however you see fit.

## Service

You can import the service component anytime you need to navigate from a component outside the Navigation router. See the [Navigation section](/gravity-native/navigation.md) for more information.