Navigation appearance

Each navigation zone carries its own look. You can give the bottom bar a radial background and a sliding bubble while the top strip stays flat, because the settings are per zone rather than app-wide.

Open them with the gear beside a zone’s name on the Navigation tab. The panel covers the canvas and docks the phone preview beside it, so every change is visible as you make it. Nothing is saved until you press Save Changes; Cancel (or the close button) throws the edits away and the preview goes back to what is saved.

What each zone offers

Setting	Bottom	Top	Upper	Side
Hide on scroll	Yes	Yes	Yes	—
Navigation style (bar / floating glass)	Yes	—	—	—
Wrapper spacing	Yes	Yes	Yes	Yes
Inner spacing	Yes	Yes	Yes	Yes
Colours	Yes	Yes	Icons only	Yes
Border and radius	Yes	Yes	Yes	Yes
Background	Yes	Yes	Yes	Yes
Active indicator	Travelling	Travelling	—	In place

Hide on scroll and the bar / floating glass choice used to sit on the navigation tab itself. They moved into this panel; they do the same thing and they are stored the same way, so apps built before the move are unchanged.

Spacing

Two groups, because there are two different things to move.

Wrapper spacing is the space around the bar. It insets the bar from the screen’s edges, and from any bar stacked next to it. This is how you give the top strip the inset, floating look the bottom bar has as a style. Both values default to 0, so a bar you never touch stays edge to edge.

Wrapper Padding Y goes on the side of the bar facing away from your screen’s content: above a Top or Upper Nav, below the Bottom Nav. That keeps the bar’s border where it belongs — as the line between the navigation and the content — instead of leaving a band of empty bar below the line. It also means the Top Nav’s wrapper Padding Y is what opens the gap beneath the Upper Nav above it.

Inner spacing is the space within the bar: Padding X and Y push the items away from the bar’s own edges, and Gap separates them from each other. Empty means the bar keeps its built-in metrics. If you want breathing room between the labels and the bar’s border, this is the group to use.

Padding Y in either group makes the bar taller rather than squeezing its contents, and the screen behind it moves down to match.

Colours

Every colour field is an override. Leave one empty and it follows your theme — the primary colour for the active item, the secondary for the rest. Each has a dark-mode twin, so a bar can read correctly in both.

Upper Nav has one icon colour rather than two, because nothing in it is ever active. Its items are actions: a menu button, a notification bell, a theme toggle.

Background

Five choices: Default, Solid, Glossy, Gradient and Radial. Default leaves the bar painting what it always painted.

A background here replaces the bar’s fill rather than sitting on top of it, including the app-wide glass surface set in Appearance. That is deliberate: layered over glass, a background would cover the blur and read as the blur having broken. Set a zone background when you want that bar to look like itself, not like the app’s chrome.

Radial backgrounds use the same centre-and-spread controls as the app background, so a glow in the bar lands where a glow on the screen behind it would.

Active indicator

A shape that marks the active item and slides to whichever item you tap. None is the default, so no existing app changes until you pick one.

Type	What it draws
None	Nothing — the active item is marked by colour alone
Pill	A filled capsule behind the whole active item
Bubble	A blob over the icon that stretches as it travels, then settles
Underline	A bar pinned to the active item’s bottom edge
Dot	A small dot under the active item’s label
Spotlight	A soft radial glow behind the active item, with no hard edge
Notch	A raised platform under the active item, running to the bar’s edge

Colour, duration and corner radius are all adjustable. Left on auto, Pill and Bubble are fully round; set a Shape radius to square them off. Duration is capped between 120ms and 600ms: below that the movement is imperceptible, above it the bar feels unresponsive.

Bottom and Top slide. Side fades. Upper has none.

Bottom and Top Nav lay their items out as equal-width slots, so a shape has somewhere to travel between. They get all seven types.

Side Nav rows are different heights and sit in a scrolling list, so there is no slot for a shape to move along. Its indicator cross-fades in place instead, and it offers four options: None, Highlight (the row’s background fills), Left bar (a bar down the row’s leading edge) and Pill (both, rounded). Leave it unset and the drawer keeps the fill and leading bar it has always drawn.

Upper Nav shows no indicator section. It has no active tab to mark.

Note

Choosing an indicator on Top Nav replaces the small underline it draws today. That underline is still what you get while the setting is None.

Dot on Top Nav makes the bar about 8px taller when its items show labels, so the dot sits under the label rather than over it. If you’ve set Padding Y to 8 or more, there’s already room and the bar keeps its height.

What breaks

A setting looks right in the preview and is gone after a reload. The preview shows your edits before they are saved. Press Save Changes before closing the panel. A save also needs a connected app that has been saved at least once. If it still will not stick, save the layout, then reopen the gear.

The bar’s background covers the blur on a glass app. That is the documented behaviour, not a fault — a zone background replaces the glass for that bar. Set the background back to Default to get the glass back.

The indicator sits under the wrong item. It follows the active feature, and features hidden from the current member by a role restriction are not counted. Preview as a member who can see every tab in that bar, or check the tab’s restrictions in Tab settings.

Padding Y made the bar taller than expected. Inner Padding Y is added above and below, so a value of 8 adds 16 to the bar’s height. Wrapper Padding Y is added on one side only, so 8 adds 8. Reduce one, or leave it empty to keep the built-in height.

The bar is inset but the items did not move. Wrapper spacing moves the bar; inner spacing moves what is in it. If you wanted the icons further from the bar’s edge, that is the Inner spacing group.

The border is too close to the labels. The border sits at the bar’s edge, and wrapper spacing is outside the bar, so it cannot push the border further away. Use inner Padding Y — that grows the bar itself, taking the border with it.