Overview
Navigation appearance is configured in Settings → Development → Navigation → Appearance tab. It covers where the bar sits, whether it is anchored or floating, how the bar is styled, and how each menu entry is drawn. The panel has two sections: Styling for the bar and Navigation Button for the entries in it.
Note: Appearance is configured per breakpoint. Switch breakpoints with the four device icons under Breakpoints at the top of the Appearance tab: laptop (XL), horizontal tablet (LG), vertical tablet (MD) and phone (SM). Hover an icon to see its width range. Each breakpoint is styled on its own. A breakpoint you have not configured uses the defaults (a sidebar at the start on XL, LG and MD, a bottom bar on SM). It does not copy the settings of another breakpoint.
Menu Items at Each Breakpoint
Below Breakpoints, the Appearance tab lists the Menu Items, Secondary Menu Items and User Menu Items for the selected breakpoint. Drag entries to change their order at this breakpoint, and use the eye icon to show or hide one. See Nav Slots and Order.
Note: In a web app, the Menu Items list has a Hidden in overflow area ("Drag items here to hide them in the overflow menu"). An entry you drag there is removed from the navigation at this breakpoint. The running app doesn't show a "More" overflow menu yet, so users can't reach that entry from the navigation. The overflow Label and Icon (pencil icon) are saved but not used. To hide an entry on purpose, use the eye icon or the entry's Breakpoint Visibility instead.
Styling: The Navigation Bar
Control | What it does |
|---|---|
Position | The edge the bar sits on. XL offers Start or Top. LG and MD offer Start, Top or Bottom. On SM, the Bottom Bar style sits at the bottom and the Drawer style opens from Start or End. |
Navigation Style | Standard (the built-in bar) or Custom (a module you build) on XL, LG and MD. Bottom Bar, Drawer or None on SM. See Navigator Types. |
Position Type | Anchored (the bar meets the page edge) or Floating (the bar sits inset from the edge as a detached panel). A floating bar has its own margin, set under Styles. |
Page Transition | Fade or Slide Horizontal when moving between pages. Web apps only. |
Styles | Width (sidebars), Height (top and bottom bars), Padding, Logo-Buttons Gap, Navigation Buttons Gap, Shadow, Stroke (border) and Radius. |
Theme | Inherit (follows the app's color scheme), Light or Dark (always uses that look, so a sidebar can stay dark while the page beside it is light). Not shown for Custom navigation or in mobile apps. |
Note: There is no background color control for the bar in this panel. The bar's fill comes from the app theme: open the theme, go to Background, and set Navigation Background Colour. Light and dark values are set separately. See Theme Builder.
Navigation Button: Menu Entries
These settings apply to every entry in the bar at the selected breakpoint. You can't style one entry differently from the rest.
Control | Options |
|---|---|
Selection Style | Stroke (outline, the default) or Solid (filled background) for the entry you are on. Not offered for a top bar. |
Labels | XL with a start or top bar: Expand to Show on Hover, Show upfront, Show in tooltip or None. Other breakpoints: Show upfront or None. |
Direction | Column (label beneath the icon) or Row (label beside the icon). Shown only when Labels is set to Show upfront. |
Styles | Padding, Gap (between icon and label) and Radius of each entry. |
Background | Default Color, Hover Color and Active Color of the area behind each entry. |
Text | Default Color, Hover Color and Active Color, plus Size, Weight and Font. |
Icon | Default Color, Hover Color and Active Color, plus Size (xs, sm, md or lg). |
Tip: Stroke and Solid use separate color sets. After switching Selection Style, check the default, hover and active colors again.
Dark Mode Support
Navigation follows the app's color scheme. When a user switches to dark mode (from the profile menu's Change Color Scheme option or the system setting), the bar uses the dark value of the theme's Navigation Background Colour. Set both the light and dark values in the theme so the bar reads well in either mode.
If you need a binding that depends on the scheme, use {{ theme['colorScheme'] === 'dark' ? … : … }}. The value is light or dark.
Quick Setup: Styling Your Navigation
Pick a breakpoint: Under Breakpoints, select the screen size you want to style.
Place the bar: In Styling, set Position, Navigation Style and Position Type.
Style the entries: In Navigation Button, set Selection Style, Labels and the Background, Text and Icon colors.
Set the bar color: In the app theme, set Navigation Background Colour for light and dark.
Repeat and preview: Repeat for each breakpoint you support, then check the menu in preview in both light and dark mode.