SSS Navigation Guide: Tabs, Active Colors & Mobile Use
Navigation tells visitors where they are and where they can go next. The current tab should stand out right away, while every other tab remains easy to read.
Loading matched recommendations...
Settings in this guide
- Navigation Background Color: the normal tab area.
- Navigation Text Color: the normal tab labels.
- Navigation Active Background: the current tab background.
- Navigation Active Text: the current tab label.
- Navigation Border Size: None, 1px, 2px, or 3px.
- Navigation Border Style: Solid, Dashed, Dotted, Double, or None.
- Navigation Border Color: the line color.
This picture shows the older Classic Backup view. The setting names can still help you find the same choices in Studio Editor.
Whole Home and Room designs
Whole Home can create one shared navigation style. A Room design can change the colors or frame without changing where the tabs lead.
Whole Home
Use it for the shared look that Rooms follow unless you give a Room its own design.
One Room
Use it when only one part of your Digital Home needs a different look.
Private Draft
Studio keeps your changes private until you publish them.
Classic Backup
Classic Backup changes the public Whole Home as soon as saving finishes.
Recommended order
- Set the normal background and text colors.
- Set the active background so the current tab clearly stands out.
- Set active text with strong contrast.
- Add a simple border if the tabs blend into the page.
- Check every Room tab that is available.
- Check Activity controls in case they share an active color.
- Preview keyboard use and phone view.
Make navigation easy for everyone
- Use color plus another clue, such as a border or stronger shape, for the current tab.
- Keep the visible keyboard outline.
- Normal tabs must still have readable text.
- Do not rely on hover because phones and keyboard users do not use it the same way.
- Make sure long tab names do not get cut off.
Starter navigation styles
Dark neon
Deep navy normal tabs, soft white labels, cyan or pink active tab, and a 1px border.
Minimal light
Light neutral tabs, dark labels, a deeper neutral active tab, and a soft gray border.
Retro panel
Muted silver tabs, blue-gray labels, classic blue active tab, and a 1–2px border.
Reading Room
Low-color normal tabs, a very clear active tab, and no competing glow.
Loading matched recommendations...
Phone navigation
- Check whether tabs wrap, scroll sideways, or become too narrow.
- Keep the current tab obvious at small sizes.
- Do not use thick borders that reduce tap space.
- Test moving forward and backward between Rooms.
Common fixes
Current tab is unclear
Increase the difference between active and normal tabs.
Navigation feels too loud
Use softer normal colors and save the bright accent for the active tab.
Tabs blend into the page
Add a subtle 1px border.
Activity controls became too bright
Lower the Active Background brightness or saturation.
Phone labels wrap badly
Reduce padding, border thickness, or text size carefully.
Wrong Room changed
Check the selected Room and publish destination.
FAQs
What is the main navigation rule?
The current tab should be obvious right away.
Which settings should I set first?
Normal background and text, then active background and text.
Can Rooms use different navigation styles?
Yes, when those settings are available for the selected Room.
Why did an Activity control change too?
Some activity buttons may share the active navigation color.
Should normal tabs be faint?
They can be quieter than the current tab, but they must remain readable.
What should keyboard users see?
A clear outline around the tab they are on.
What is the safest border?
A subtle 1px Solid line.
What is the quickest safe reset?
Use calmer normal colors and stronger active text contrast.
Loading matched recommendations...
