Skip to main content link. Accesskey S

Title Bar

The titlebar contains a title and/or navigational tabs. It also contains a search component. The ultimate design direction of this component is not to use both a title and tabs in the title bar, it is to use one or the other.

Directionality:

Titlebar with Title

Titlebar with Tabs

Titlebar with Title and Tabs

Classes

  • 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.
  • lotusTabsIndented - an additional class when tabs are used with an application title to align them with the center column
  • lotusSearch - see search component
  • lotusEllipsis - a class assigned to the h2 tag used for the title when the title coexists with tabs in the titlebar. Will truncate and add ellipses to a long title in all browsers except Firefox, which will just truncate.

Basic Implementation

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

If you desire a title, wrap the application name in an h2 tag. If you are also going to use tabs, assign the h2 tag the class of lotusEllipsis.

If you desire tabs, create an unordered list with the class of lotusTabs. This is our tab component without the tabContainer div (the title bar div functions as the tab container). If you are using tabs along with the title, assign an additional class of lotusTabsIndent to the tabs.

Place a search control as the final element.

Examples

Sample HTML - title only

Sample HTML - tabs only

Sample HTML - title and tabs

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!

May 7, 2009: we have allowed 3 variations of titlebars - title only, title with tabs (requires some additional classes), and tabs only.

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.