Skip to main content link. Accesskey S

Tabs

Tabs are part of a navigational structure that allows you to chunk information in a logical way, where the selected tab only shows one relevant chunk of information and hides the rest until it accessed via another tab.

Directionality:

Classes

  • lotusTabContainer - tabs need to be in a div with this class
  • lotusTabs - assigned to a ul tag
  • lotusSelected - goes on the li tag of the selected tab
  • lotusTabContent (optional) - goes on the div that wraps the content if you want a border around your tab content.

Basic Implementation

Tabs are created using an unordered list, each list item is a tab with a link tag inside of it that makes the tab interactive.

The unordered list sits inside a div assigned the lotusTabContainer class. This gives the div a position of relative, and the tabs are positioned absolutely at the bottom of the container.

Content goes after the tab list, wrapped in a div so that you can aria-enable it as a tab panel.

Variations

We have a set of tabs in our titlebar. In that case the titlebar div functions as the tab container and is given a position of relative. We don't use a div for tab content in that case because our titlebar tabs navigate to another page.

Examples

Sample HTML

CSS (tabs.css)

Theme CSS (tabsTheme.css)

August 2009: added a div following the tab container for tab content. This allows us to aria-enable the tabs.

February 2009: added an extra div inside the li tag and around the link tag to support barn-door styling using 3 graphics.

We've created tabs this way to support the sliding doors technique for tabs with rounded corners, but this implementation of tabs can also be styled just using borders.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.