Overview

Navigation chrome appearance is configured in App Settings → Development → Navigation → Appearance tab. Properties are organized by navigator component type. Each property can be set as a static value or as a dynamic expression that updates at runtime — enabling theme-aware navigation, role-based colour schemes, and context-sensitive headers.

Note: All appearance properties are configured per breakpoint. Switch between XL, LG, MD, and SM at the top of the Appearance tab to set different styling for each viewport size. A property not set at a specific breakpoint inherits from the next wider breakpoint that has it set.

Tab Bar Properties

These properties control the appearance of the Tab Navigator's tab bar — either the bottom bar on mobile or the top tab strip on web.

Property	Type	Description
`backgroundColor`	`color`	Background colour of the entire tab bar. Accepts a hex value, RGB/A, or a theme token (e.g. `{{theme.surface}}`). On mobile, this extends behind the device home indicator on iOS — set it to match your app background for a seamless look.
`activeColor`	`color`	Colour of the icon and label for the currently active (selected) tab. Should have sufficient contrast against `backgroundColor` to meet accessibility guidelines.
`inactiveColor`	`color`	Colour of icons and labels for unselected tabs. Typically a muted or lower-opacity version of `activeColor`.
`borderVisible`	`boolean`	Whether a top border (on bottom bar) or bottom border (on top tabs) is rendered. Defaults to `true`. Set to `false` for a cleaner, borderless look when the tab bar colour is already distinct from the page content.
`height`	`number (px)`	Height of the tab bar in pixels. Default is 56 px on mobile (matching the iOS Human Interface Guidelines minimum). Increase to 64–72 px for larger touch targets, or decrease to 48 px for compact layouts.
`iconSize`	`number (px)`	Width and height of the tab icon in pixels. Default is 24 px. Sizes above 32 px require a larger tab bar height to avoid clipping.
`labelVisible`	`boolean`	Whether to show the tab label below the icon. When `false`, only the icon is shown — increases visual density but reduces discoverability for new users. Always show labels in apps where users may not recognize icons immediately.
`labelPosition`	`enum`	Position of the label relative to the icon. `below` (default on mobile), `right` (icon and label side-by-side — common in web top tabs). `right` requires a wider tab bar or fewer tabs to avoid truncation.

Drawer Properties

These properties control the slide-in drawer panel rendered by the Drawer Navigator.

Property	Type	Description
`backgroundColor`	`color`	Background colour of the drawer panel itself — the area behind the navigation items. Use a colour distinct from the page content to make the drawer clearly identifiable as a navigation layer.
`width`	`number (px) or string (%)`	Width of the drawer panel. Default is 280 px on mobile, 260 px on web sidebar. Accepts percentage values (e.g. `30%`) for fluid layouts. On desktop persistent sidebars, width determines the page content's left margin.
`overlayOpacity`	`number (0–1)`	Opacity of the dark overlay that covers the page content when the drawer is open on mobile. Default is 0.4. Set to 0 to disable the overlay entirely — useful when the drawer is semi-transparent or the page content should remain fully visible.
`borderRadius`	`number (px)`	Corner radius applied to the right edge of the drawer (for left-side drawers). Default is 0. A value of 12–16 px creates a modern card-style drawer on mobile.
`headerContent`	`slot`	A content slot at the top of the drawer, rendered above the navigation item list. Drag any component into this slot — typically a brand logo, the user's avatar and name, or a search input. See Nav Slots and Order for details on slot configuration.
`itemPadding`	`number (px)`	Horizontal padding inside each drawer item (between the drawer edge and the icon/label). Controls the visual breathing room of the item list. Default is 16 px.
`itemGap`	`number (px)`	Vertical spacing between items in the drawer list. Default is 4 px. Increase for a more spacious feel; decrease to show more items without scrolling.

Header Bar Properties

The header bar sits at the top of the content area, above the page content. It is rendered by the navigator (not by individual pages) and shows the page title and back button when applicable.

Property	Type	Description
`backgroundColor`	`color`	Background colour of the header bar. Can be a solid colour or a theme token. A transparent value (`transparent`) lets the page content scroll beneath the header — pair with a `backdrop-filter` custom CSS class for a frosted-glass effect.
`titleColor`	`color`	Colour of the header title text and back button label (on iOS-style headers where the back button shows the previous page name).
`titleAlignment`	`enum`	How the title is aligned within the header. `center` (default on mobile, matching iOS convention), `left` (matching Android and most web conventions), `right` (rarely used). On web, `left` is the standard default.
`showBackButton`	`boolean`	Whether to show the back chevron when the navigation stack depth is greater than 1. Defaults to `true` for Stack Navigators. Set to `false` for root pages where backing out is not meaningful, or when you supply a custom back button in a header slot.
`backButtonIcon`	`icon`	The icon used for the back button. Defaults to a left chevron (`chevron-left`). Can be changed to an X mark (`x`) for modal-style pages, or an arrow (`arrow-left`) to match Material Design conventions.
`elevation`	`number (0–5)`	Shadow depth below the header bar. `0` for flat (no shadow), increasing values for progressively deeper shadows. A subtle elevation of 1–2 helps separate the header from page content without a visible border. Works in conjunction with `borderVisible`.
`borderVisible`	`boolean`	Whether to render a bottom border on the header bar. Defaults to `true`. Set to `false` and use `elevation` instead for a modern, shadow-separated header.
`height`	`number (px)`	Height of the header bar. Default is 56 px. Increase to 64–72 px when you have a taller logo or need more vertical space for custom header slot content. Decrease to 44 px for compact toolbar-style headers on desktop.

Individual pages can override the app-wide header appearance. This is useful for pages that need a different header colour (e.g. a branded splash page) or a different title, without changing the app-wide default.

To set per-page header overrides:

Open Page Settings for the target page (right-click in Pages panel → Page Settings).
Click the Header tab within Page Settings.
Toggle Override app header to on.
Configure the header properties for this page. Only the properties you set here are overridden — unset properties continue to use the app-wide values.

Tip: To hide the header entirely on a specific page (common for full-screen landing pages or video pages), open Page Settings → Header → toggle Override app header on → set headerVisible to false. This removes the header for that page without affecting others.

Dynamic Styling with Expressions

Any appearance property that accepts a colour or string value can be bound to a dynamic expression. This enables powerful patterns:

📄 Examples — Dynamic nav styling

// Header background changes based on current page urgency level backgroundColor: {{ currentPage.urgencyLevel === "critical" ? "#DC2626" : theme.surface }} // Drawer item gap increases for accessibility mode itemGap: {{ user.preferences.largeUI ? 8 : 4 }} // Tab bar active colour follows the app's primary brand colour from a remote config activeColor: {{ remoteConfig.brandPrimaryColor }}

Dark Mode Support

Navigation chrome fully participates in the app's dark mode system. When a user switches to dark mode (via the profile menu's Change Color Scheme option, or the system OS setting), navigation chrome colours update alongside the rest of the app.

To configure dark-mode-aware navigation colours:

Use theme tokens instead of hardcoded hex values. Theme tokens (e.g. {{theme.surface}}, {{theme.onSurface}}) are defined in your app's theme and automatically switch between light and dark values. See Themes for the full token reference.
For properties that cannot use theme tokens, use the {{theme.mode}} binding to conditionally return the right colour: {{ theme.mode === "dark" ? "#1E293B" : "#FFFFFF" }}.

Note: Hardcoded conditional expressions using {{theme.mode}} work but require updating two values whenever you change a colour. Theme tokens are updated once in the Themes panel and propagate everywhere automatically. Always prefer tokens for colours that should respond to theme changes.

Set the tab bar or drawer background: Start with backgroundColor — this has the largest visual impact. Use a theme surface token for automatic dark/light adaptation.
Set active and inactive colours: For Tab Navigator, set activeColor to your brand primary and inactiveColor to a muted grey. Verify contrast ratios against the backgroundColor.
Configure the header: Set titleAlignment to match platform convention (center for mobile, left for web). Decide whether to use a border or elevation to separate the header from content.
Preview in both themes: In Preview mode, toggle between light and dark mode using the theme switcher in the preview header. Verify all navigation colours are readable in both modes.

Nav Appearance