Tabs
Tabs are used for displaying grouped content. This pattern allows a user to switch between related pieces of content while retaining the main context and illusion of being at a single location on the site. Sometimes used as a "filter".
Design Specs
- Tab height is 36px and each tab has 1px side bar, color #aaaaaa.
- 2. Active tabs have a 3px top bar, color #005ccc. The text is Open Sans Semibold, size 15px, color #001733 (font-color-primary). Tabs on Desktop and tablet have a 20px padding on left and right of the text.
- Inactive tab tabs have a 1px top and lower bar, color #aaaaaa. The text is Open Sans Regular, 15px, #005ccc (font-color-action).
- Hover tabs have a 3px top bar #001733 (font-color-primary). Text styling is the same as inactive tab text styling - Open Sans Regular, 15px, #005ccc (font-color-action).
- The lower bar should extend to match the length of the content area below the tab area.
- Tabs on mobile have a reduce left and right padding around the text of 10px, in consideration of the smaller device size.
Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.
Production Examples
- Sears
- Kmart
Mobile
An example of tabs on Sears PLP, mobile.
Desktop/Tablet
An example of tabs on Sears PLP, Desktop.
Desktop/Tablet
An example of tabs on Kmart PLP, Desktop.
Usage Guidelines
1. Position
Position the row of tabs on top of the page or module — not on the sides or the bottom where users would often overlook them.
An example of correct tab positioning.
An example of incorrect tab positioning - a row of tabs must always be at the top of a page or module.
An example of incorrect tab positioning - a row of tabs must always be at the top of a page or module.
2. Form a Single Row
Use only one row of tabs.
"Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they've already visited. If you need more tabs than will fit in a single row, simplify the design, or use another design solution". (source below)
3. Default State
Always have one tab selected by default.
One tab must always be selected, and its associated content displayed.
4. Labels
Tab label content matters. Labels should be succinct, between 2-3 words, and be written in plain language. This ensures multiple tab labels are easy to read, scan and compare. No "marketing speak".
Capitalization - Title Case.
A good example of tab labels.
Long tab labels are difficult to scan and compare. Also, labels should be Title Case .