The Navbar block renders a navigation menu. It can show a title (brand), a logo, and a list of links. Links can either navigate to another view in the same interface or open an external URL.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_1024,h_130,x_0,y_0/f_auto,q_auto/v1777447195/interface-docs/navbar-render.png"
  alt="A horizontal navbar rendered with the Acme logo and title on the left and three links -- Customers, Orders, Settings -- on the right."
  width="1024"
  height="130"
  loading="lazy"
/>

## Brand

The **Brand** section at the top of Block Settings groups the title and the logo. Each is hidden by default and revealed by its own switch.

### Title

Turn on **Show title** to reveal the title fields:

| Setting | Description |
|---|---|
| **Title Text** | The title shown next to the logo. |
| **Font Size (px)** | Font size in pixels, between 12 and 48 (default: 18). |
| **Font Weight** | **Normal**, **Medium**, **Semibold**, or **Bold** (default: Medium). |
| **Title Color** | Text color (default: inherit). |

### Logo

Turn on **Show logo** to reveal the logo fields. The logo is your own image, addressed by URL — it is not one of the catalogue icons a link can carry:

| Setting | Description |
|---|---|
| **Image URL** | The logo image URL. |
| **Alt Text** | Alternative text shown when the image cannot load (default: `Logo`). Also used by screen readers. |
| **Width (px)** | Logo width in pixels, between 16 and 200 (default: 32). |
| **Height (px)** | Logo height in pixels, between 16 and 200 (default: 32). |

## Aria Label

| Setting | Description |
|---|---|
| **Aria Label** | Screen-reader label for the navigation region (default: `Navigation menu`). |

## Layout

| Setting | Description |
|---|---|
| **Layout Direction** | **Horizontal** (links in a row) or **Vertical** (links stacked). |
| **Alignment** | **Left**, **Center**, **Right**, or **Space Between** -- how the links are arranged along the layout direction. |
| **Spacing (px)** | Gap between items, in pixels, 0--50 (default: 8). |

## Navigation Links

Click **Manage Links** to open the link manager dialog. Inside the dialog, click **Add** to append a new link, drag the handle to reorder, and click the trash icon to remove. Each link expands into an accordion with:

| Setting | Description |
|---|---|
| **Label** | The clickable text. Required, even when it is hidden. |
| **Icon before text** | Optional glyph shown to the left of the label. See [Link icons](#link-icons) below. |
| **Icon after text** | Optional glyph shown to the right of the label. Unavailable while **Show text** is off. See [Link icons](#link-icons) below. |
| **Show text** | On by default. Turn it off for a glyph-only link. Unavailable until you have picked an icon. See [Link icons](#link-icons) below. |
| **Link Type** | Pick **Interface** (navigate to another view) or **External URL** (open a URL). |
| **Variant** | The visual style of this link. Default: **Navbar default**. See [Link Variant](#link-variant) below. |
| **Apply to all links** | Copies this link's Variant and its custom colors onto every other link. Shown when the navbar has more than one link. |
| **Target Interface** | Target view dropdown. Shown when Link Type is **Interface**. |
| **Parameters** | Key/value pairs passed as search params to the target view. Shown when Link Type is **Interface**. |
| **URL** | The URL to open. Shown when Link Type is **External URL**. Supports the Data Picker. |

### Link icons

A link has the same two icon slots as the [Button block](/docs/buttons/interface-button/interface-builder/reference/block-types/button#icons), **Icon before text** and **Icon after text**, filled from the same shared catalogue. The slots are independent, and **Show text** can hide the label, so five arrangements are reachable:

| Arrangement | How |
|---|---|
| Text only | Leave both slots on **No icon**. This is how every link behaved before the slots existed. |
| Icon + text | Fill **Icon before text**. |
| Text + icon | Fill **Icon after text**. |
| Icon + text + icon | Fill both. |
| Glyph only | Fill **Icon before text**, then turn **Show text** off. |

Notes:

- The glyph is chosen once, in the builder. It does not come from your data.
- There is no size or colour setting. A glyph is always 16 px and always takes the colour of the label beside it: the navbar's own **Text Color** on a **Navbar default** link, the variant's colour on a link with a variant, and the **Text Color** you picked on a **Custom** link.
- A link has no size setting, so the **Button Size** rule of an icon-only button does not apply here.

### Glyph-only links

Turn **Show text** off to keep the glyph and drop the label. The link becomes a square: its horizontal padding shrinks to the vertical padding it already had, so it stays exactly as tall as the labelled links beside it and the navbar keeps a straight edge.

Nothing is lost by hiding the label:

- The label becomes the link's accessible name, so a screen reader announces it.
- The label also appears as a tooltip when the user hovers the link.

Two rules keep a glyph-only link usable, and the builder applies both:

- **Show text** is unavailable until you have picked an icon, with a note saying so — a link with neither a label nor a glyph would be empty.
- **Icon after text** is unavailable while the label is hidden — a glyph-only link carries one glyph. If that glyph was in the **Icon after text** slot when you turned **Show text** off, it moves to **Icon before text** for you.

### Link Variant

Each link can use one of the same variants as the [Button block](/docs/buttons/interface-button/interface-builder/reference/block-types/button#button-variant): **Custom**, **Default**, **Link**, **Destructive**, **Outline**, **Secondary**, or **Ghost**.

The default choice, **Navbar default**, keeps the classic navbar appearance: a borderless ghost look that follows the navbar's own colors. An explicitly chosen variant takes its appearance entirely from that variant instead — so an explicit **Ghost** is not the same as **Navbar default**, even though they look similar.

### Custom variant colors

Picking the **Custom** variant reveals three color fields:

| Setting | Description |
|---|---|
| **Text Color** | The link's text color. Required. |
| **Background Color** | The link's background color. Required. Check **Transparent** to use no background. |
| **Hover Background Color** | Background color while the pointer hovers the link. Off by default; check **Enable** to set it. |

## Style and Visibility

The Navbar block uses the standard **Style** sub-tab (background, font, borders, radius) and **Visibility** sub-tab in Block Settings, the same as every other block. See [Block Styles](/docs/buttons/interface-button/interface-builder/reference/styles/block-styles) and [Conditional Visibility](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).