Appearance
Navbar Block
Type: Reference | Audience: Interface builder user
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.
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.
Renamed
The brand image used to be called the icon. It is now the Logo, so that "icon" means one thing in this panel: a catalogue glyph on a link. Nothing about your stored navbars changes.
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 below. |
| Icon after text | Optional glyph shown to the right of the label. Unavailable while Show text is off. See 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 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 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, 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: 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 and Conditional Visibility.