Skip to main content link. Accesskey S


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.



  • 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.


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.


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, 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