The primary goal of tabs is to view a group of related data one at a time, or to show alternative views of the same group of information. Tabs should divide content into meaningful sections that occupy less screen space, but their visual design will draw more attention than paragraphs, so they’re hard to miss by users.
Guidelines for Using Tabs
- Tab content should be related. The tab design pattern implies that there is a relationship between information displayed on each pane, therefore you should have content that can be logically grouped together. For example, using tabs for "most popular posts," "recent posts," and "most commented posts" have a rational category.
- Information that doesn’t need to be compared or accessed simultaneously. Information in different panes will be shown to users one at a time, as they click on each tab. When information must be compared to each other, or when information is better presented simultaneously, it’s best not to use tabs because they can produce an annoying experience when users have to click back and forth to compare and contrast information.
- Arrange the tabs in an order that makes sense to users.
- Use short and logical names for tab titles. They should be written in plain language using title-case (the first letter of each word capitalized) and consist of 1-2 key words only.
- Tabs are for terse content. Tabs are meant to contain modular and easily digested information and are only appropriate for data that is succinct and to the point such as lists, data conveyed as graphics, or one to two short paragraphs of text.
Sample: Starbucks Menu
- Bottled Drinks
- Brewed Coffee
- Chocolate Beverages
- Espresso Beverages
- Frappuccino® Blended Beverages
- Kids’ Drinks & Others
- Starbucks Refreshers™ Beverages
- Iced Coffee
- Iced Tea
- Starbucks Petites
- Bistro Boxes
- Hot Breakfast
- Sandwiches, Paninis & Salads
- Ice Cream
- Yogurt and Fruit
- La Boulange
- Food Nutrition
- Drink Nutrition
- Delicious Drinks Under 200 Calories
- Favorite Foods Under 350 Calorie
How to Add Tabs
Tabs are added in the Sitecore Editor by carefully entering special text to indicate which content should be a tab’s title, and what content should be placed in the tab’s pane. The text we enter to similar to the accordian elements:
- The title for each tab must be on its own line, formatted as a Heading 3 with the word “tab” in single parentheses at the end of the line.
- The next line indicates the beginning of the content that appears in the pane for that tab. Enter two opening parentheses on this line and nothing else.
- The following lines contain all the content you want displayed in the pane.
- Following your content, enter a new line and type two closing double-parentheses, and nothing else.
The content in the Sitecore Editor will look something like this:
You can also add tabs to your page using the Insert Tab snippet, then replace the placeholder text with your own.
Note: Tabs have been designed to work in the webolution version of the website. On the current website, tabs are displayed as Heading 3s followed by normal paragraphs of text. Please use these new elements to update you pages now, so content is ready for when we go live in October. You can preview what your pages will look like on the Webolution Preview Site.