> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/navigation-bar-buttons/navigation-bar-buttons.md).

# Overview

The buttons your customers tap in the top bar.

Navigation bar buttons are the controls on either side of a screen's title — a cart with a live count, a share button, a menu, a link to your socials. They are drawn by the app, so they respond instantly and keep working while the page underneath is still loading.

You add them per screen, on the **Navigation bar** tab. See [Navigation Bar](/screen-customization/navigation-bar.md).

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-a19beac609fbf07e17d00b1543a0d27e1c942b7e%2Fnav-bar-select-button.png?alt=media" alt="The Select Button dialog showing all eight button types, with Premium badges on Barcode Scanner and Native Notification Screen"><figcaption></figcaption></figure>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Back</strong></td><td>Returns to the previous page. Added for you on every screen.</td><td><a href="/navigation-bar-buttons/back-button.md">Back</a></td></tr><tr><td><strong>Linker</strong></td><td>Opens a page you choose.</td><td><a href="/navigation-bar-buttons/linker-button.md">Linker</a></td></tr><tr><td><strong>Cart</strong></td><td>Opens your cart, with a live item count.</td><td><a href="/navigation-bar-buttons/cart-button.md">Cart</a></td></tr><tr><td><strong>Custom Button</strong></td><td>Runs your script, or taps something on your page for you.</td><td><a href="/navigation-bar-buttons/custom-button.md">Custom</a></td></tr><tr><td><strong>Native Link Sharing</strong></td><td>Opens the phone's share sheet for the current page.</td><td><a href="/navigation-bar-buttons/native-link-sharing.md">Native Link Sharing</a></td></tr><tr><td><strong>Hamburger</strong></td><td>A slide-out menu with your own links.</td><td><a href="/navigation-bar-buttons/hamburger-menu.md">Hamburger Menu</a></td></tr><tr><td><strong>Native Notification Screen</strong></td><td>Opens the in-app notification inbox, with an unread count.</td><td><a href="/navigation-bar-buttons/native-notification-screen-button.md">Native Notification Screen</a></td></tr></tbody></table>

Two more types appear in the picker and are documented with the features they belong to:

* **Barcode Scanner** — opens the camera to scan a barcode or QR code. See [Barcode & QR Scanner](/native-integrations/overview-1/barcode-qr-scanner.md).
* **Multi Language** — lets customers switch language. See [Multi Language](/native-integrations/overview-1/multi-language.md).

## What every button shares

Whichever type you pick, the dialog asks for some of the same things.

| Field                                     | Notes                                                                                     |
| ----------------------------------------- | ----------------------------------------------------------------------------------------- |
| **Button Icon**                           | Required. Choose from the supplied icons or upload a `.png`, `.jpg` or `.jpeg`.           |
| **Visibility → User**                     | Show the button to **All** customers, only to logged-in ones, or only to logged-out ones. |
| **Analytics → Enable Firebase Analytics** | Premium. Records an event each time the button is tapped.                                 |

{% hint style="info" %}
**Visibility** is what you want for an account button that should only appear once someone has signed in, or a *Log in* link that should disappear once they have. It relies on your app knowing who is signed in — see [Enable Login Screen](/screens/login.md).
{% endhint %}

## Managing buttons

Each button in the list has a pencil to edit it. The row's menu also offers:

* **Move to Right** / **Move to Left** — switch a button to the other side of the title.
* **Copy to** — copy the button to your other screens, so you don't rebuild the same cart button six times. You need more than one screen for this.
* **Delete** — remove it.

## Limits worth knowing

* **Back** is on every screen's left side, cannot be deleted, and nothing can be placed above it.
* **Hamburger** — one per screen.
* **Multi Language** — one per screen.
* **Barcode Scanner** and **Native Notification Screen** need a **Premium** plan.
* **Native Link Sharing**, **Multi Language** and **Native Notification Screen** need a recent app version. If yours is older, the portal offers to create a new version.

{% hint style="warning" %}
Keep each side to two buttons or fewer. Buttons share the bar with the title, and a crowded bar squeezes the title out first — see [Navigation Bar Title](/screen-customization/navigation-bar/navigation-bar-title.md). A Hamburger menu is the usual answer when you have more to offer than the bar can hold.
{% endhint %}