Module Tabs Design Pattern

By YUI TeamFebruary 13, 2006

Problem Summary

The user needs to navigate through one or more stacked panes of content without refreshing the page.

Module Tabs from Yahoo! News

The challenge here is to distinguish tabs that control content within a page from general site navigation tabs. The approach we take a Yahoo! is to treat them visually lighter. Using links for the non-selected tab and the pointer style tab for the selected tabs creates a visual contrast with the Navigation Tabs that might appear on a given site.

Tidwell describes the general pattern behind tabs as a Card Stack.

The pattern can be found at: Module Tabs.

Note 1/3/2007: For code samples to support this design pattern, please see the YUI TabView Control. -Eric Miraglia