Sub Nav

This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.


Add a .sub-nav class to a dl element and fill it full of definitions. You can use the definition title as a label at the beginning (useful for building filters on a page).

Add a title to the beginning of your list with the dt element. Add an .active class to a dd element to give it the active style.

Color Palette

The sub nav supports all the Sonos color palette options. Just add a simple class addition of your choice.