Navigation Guide
Navigation controls tabs and menu states so users can always tell where they are and where to click next.
Fast path: background -> text -> active background -> active text -> border size/style/color.
Navigation Fields (Current Stack)
- Navigation Background Color: base strip/container behind nav elements.
- Navigation Text Color: color for default/inactive nav text.
- Navigation Active Background: selected/active item background color.
- Navigation Active Text: selected/active item text color.
- Navigation Border Size:
None, 1px, 2px, 3px. - Navigation Border Style:
Solid, Dashed, Dotted, Double, None. - Navigation Border Color: border color for nav containers/items.
Navigation controls from your settings screen.
Stack behavior note:
Navigation Active Background also targets active post-option controls in activity feed, so very strong colors can carry into feed action states.
Navigation Workflow
- Set Navigation Background Color to fit your block/sidebar palette.
- Set Navigation Text Color so inactive items are readable but not louder than active state.
- Set Navigation Active Background with clear visual separation from base background.
- Set Navigation Active Text for strong contrast against active background.
- Set Border Size/Style/Color to frame nav cleanly without making it look heavy.
Starter Recipes
Dark Neon
- Background: deep navy
- Text: soft white
- Active Background: cyan or magenta accent
- Active Text: dark charcoal or white (whichever contrasts better)
- Border: 1px Solid subtle accent tint
Minimal Clean
- Background: light neutral
- Text: medium-dark gray
- Active Background: slightly deeper neutral
- Active Text: near-black
- Border: 1px Solid light gray
Retro Panel
- Background: muted silver or pale gray
- Text: blue-gray
- Active Background: classic blue
- Active Text: white
- Border: 1px or 2px Solid for stronger panel framing
Common Fixes
- Users cannot tell what is active: increase contrast between active and base backgrounds.
- Navigation feels loud: desaturate inactive text and reserve accent for active state only.
- Navigation blends into page: add a subtle 1px border color with enough separation.
- Looks inconsistent across sections: align nav background with Colors section surfaces.
- Activity actions inherit too much color: tone down Navigation Active Background saturation.
FAQs
What is the main navigation rule?
Users must immediately identify the active state.
What should I set first?
Base nav background/text, then active background/text.
Why does navigation feel loud?
Inactive states are too saturated; reserve accents for active state.
How can borders help?
A subtle border separates navigation from page surfaces cleanly.
Why do other active UI elements change a lot?
Active nav colors can carry into other active controls.
What is a quick stabilization?
Reduce active saturation and increase active text contrast.
