Skip to main content link. Accesskey S

Title Bar

The titlebar contains navigational tabs. It also contains a search component.

Sprites: Directionality:


  • lotusTitleBar - the class that goes on the outermost containing div.
  • lotusRightCorner - the class that goes on the next outermost containing div (for additional styling options).
  • lotusInner - the class that goes on the innermost containing div (for additional styling options).
  • lotusTabs - these pick up most of their styling from the tab component, with some overrides.
  • lotusSearch - see search component

Basic Implementation

The title bar is created using three nested divs to support our graphic treatment. The three classes used are described above.

Place an unordered list with the class of lotusTabs as the first element of the title bar. This is our tab component without the tabContainer div (the title bar div functions as the tab container).

Place a search control as the second element.


Sample HTML

CSS (titlebar.css)

Theme CSS (titlebarTheme.css)

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

This component started off being styled by using lotusTitleBar as an id. This is obsolete. Assign lotusTitleBar as a class.

There are 3 wrapping divs to support a look of rounded corners.

It used to contain a title, hence it's name, but it was determined that most of the time, the title was redundant and confusing to users. An empty h2 tag in the titlebar will cause display issues when you have a placebar on the page, so be sure to remove it!

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