Navigation Guide: Menus, tabs, and active states
Navigation is the “real UI” layer: tabs, menus, and the “you are here” highlight.
Set it right and your profile feels organized instead of accidental.
📸 What you’ll see in Navigation
This matches the Navigation section on the Settings screen.
What Navigation controls:
The colors for menus and tab strips (like profile tabs). It does not control buttons, links, or your main sidebar surface.
The colors for menus and tab strips (like profile tabs). It does not control buttons, links, or your main sidebar surface.
🎛 Navigation settings (field-by-field)
- Navigation Background Color — the strip/container behind navigation.
- Navigation Text Color — text color for inactive nav items.
- Navigation Active Background — background for the selected tab/menu item.
- Navigation Active Text — text color for the selected item.
- Navigation Border Color — border that frames nav (helps on busy backgrounds).
- Navigation Border Size — thickness (1px is modern default).
- Navigation Border Style — solid is the safe choice.
🧱 The simple navigation stack
- Background = where the nav sits
- Text = labels you read
- Active state = “you are here” clarity
- Border = keeps nav from blending into blocks/widgets
If you can’t tell what’s active:
Your Active Background is too close to your normal background, or your Active Text doesn’t contrast enough.
Your Active Background is too close to your normal background, or your Active Text doesn’t contrast enough.
✅ The safe setup order
- Set Navigation Background Color (match your surfaces or 1 shade different).
- Set Navigation Text Color (readable but not screaming).
- Set Navigation Active Background (make it clearly different).
- Set Navigation Active Text (contrast with active background).
- Add Border Color (subtle). Keep border size small unless you want a retro panel look.
🎨 3 “copy-this” navigation recipes
⚡ Recipe A: Dark + Neon Accent
- Nav Background: deep navy / near-black
- Nav Text: off-white
- Active Background: your accent color (cyan/green/magenta)
- Active Text: off-white or near-black (whichever contrasts best)
- Border: subtle tinted accent · 1px · Solid
🧼 Recipe B: Minimal Clean
- Nav Background: off-white / light gray
- Nav Text: dark gray
- Active Background: slightly darker light gray
- Active Text: accent color or very dark gray
- Border: light gray · 1px · Solid
📼 Recipe C: Retro Panel Tabs
- Nav Background: pale gray or white
- Nav Text: blue-gray or dark
- Active Background: classic blue (or deeper gray)
- Active Text: white (if active bg is blue)
- Border: stronger contrast · 1–2px · Solid
Pro move:
Keep inactive nav text neutral, and put your “signature color” mostly in the active state.
That gives clarity without making the whole nav glow.
Keep inactive nav text neutral, and put your “signature color” mostly in the active state.
That gives clarity without making the whole nav glow.
🛠 Troubleshooting (fast fixes)
- Can’t tell what’s active: increase contrast between Nav Background and Active Background, then adjust Active Text.
- Navigation is too loud: neutralize Nav Background to match your surfaces and make active state less neon.
- Nav blends into widgets/blocks: add/adjust Border Color or move Nav Background one shade away from blocks.
- Hover looks weird: sidebar hover often lives in Colors (not Navigation). Fix hover there.
- Mobile feels crowded: avoid thick borders and low-contrast active states (mobile makes subtle choices look worse).
