Tabs and navigation

A list of items where one looks different (a highlight behind it, a brighter label, an accent bar) becomes a working tab bar or sidebar. Nothing needs naming.

• The highlight moves. A background, pill, or underline slides to the clicked item, and accent bars and dots travel with it.
• Colors follow the selection. The selected item's label and icon colors move to the clicked item; the others take the idle colors. If one item is drawn in a third color, that becomes the hover color.
• Pills that take up space reflow. When the selected tab is wider because its pill has padding (an icon with a label next to icon-only tabs), the clicked tab grows and the others slide aside.