# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FtcqzFFswo6cl6UDrmFpf%2Fnav.png?alt=media&#x26;token=b824d421-5689-442e-8229-0a5c23442eae" alt="" width="363"><figcaption></figcaption></figure></div>

### Bottom Tabs

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FFusrTLWMfRI8YvlLhqni%2Fbottom-nav.png?alt=media&#x26;token=e44ae5c3-5e41-4277-9c38-819080fcb55e" alt="" width="375"><figcaption></figcaption></figure></div>

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

## Button

A burger-style icon for revealing the drawer nav (see below). This is nested in the header of the [\<View>](https://docs.usegravity.app/gravity-native/components/view) 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](https://docs.usegravity.app/gravity-native/navigation) for more information.