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.

The condensed tabs are intended for use when the tab container has to fit in a small space, like the flyout component.

Tabs

Condensed Tabs

Classes

  • lotusTabContainer - tabs need to be in a div with this class
  • lotusTabCondensed (new) - the class that goes on the lotusTabContainer node to enable condensed styling
  • 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.

Add lotusTabCondensed to the lotusTabContainer node to enable the condensed tab styling.

Accessibility

Tabs can be made accessible in two ways, depending on how they will be used. If navigating to a tab via the keyboard would make the tab content show up, the tabs should be marked up as an ARIA Tab Panel. If content does not show up until you click/enter on the tab, the tabs should be marked up as an ARIA Tool Bar.

Tab Panel markup

This markup is shown in the code sample.

  • Put role="tablist" on the lotusTabContainer div.
  • Put role="tab" on the link element for each individual tab.
  • Put role="tabpanel" on each div that contains tab content.

Tool Bar markup

  • Put role="toolbar" on the lotusTabContainer div. Add an aria-controls attribute and assign it the id of the div that will contain the tab content. Add an aria-label attribute to describe the purpose of the tool bar, distinguishing it from other tool bars on the page. (If another element that contains more than just tabs - like a title bar - is serving as a tab container, you can move these roles to the lotusTabs div).
  • Put role="button" on the link element for each individual tab. Put the aria-pressed attribute on each link and set the active tab to true and the rest to false.

Examples

Sample HTML - tabs

Sample HTML - condensed tabs

CSS (tabs.css)

Theme CSS (tabsTheme.css)

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.

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

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

January 2011: Added accessibility section.

November 17, 2011: Added the condensed tab styling and example.

March 5, 2012: Updated the condensed tab bottom border. Removed the "put class='lotusSelected' on the li element of the selected tab" comment from the examples because that was breaking the first-child pseudo-selector in IE7.