Title Bar

The title bar in its simplest form contains the application name and the search box. In some cases, it will be desirable to make the title an active link to a base view for the application. The ultimate design direction is to not use tabs in the title bar.

Title Bar (with optional Active Title)

Title Bar with Tabs

Title Bar with Title and Tabs

Tab Icons and Tab Close Icons

Classes

  • lotusTitleBar2 - the class that goes on the outermost node.
  • lotusTitleBar2Tabs - the class that shares the lotusTitleBar2 node when the title bar has tabs.
  • lotusWrapper, lotusInner - classes on inner nodes of lotusTitleBar2 for additional styling options.
  • lotusTitleBarContent - the class that contains the title bar content (heading, tabs, etc) but not the search control.
  • lotusHeading - the class assigned to the h2 tag used for the title bar header. This node optionally contains an application image.
  • lotusIcon - the class that goes on the img inside of lotusHeading.
  • lotusText - the class on the span or anchor inside of lotusHeading. Use an anchor if you want the text to be active.
  • lotusNavTabs - the class that goes on the ul node for tabs.
  • lotusTabClosable - the class that goes on the li node if the tab has a close icon.
  • lotusTabWrapper - the class that goes on the div that contains lotusTab and lotusTabClose.
  • lotusTab - the class that goes on the anchor that is the primary tab click target.
  • lotusTabInner - the class that goes on the span inside lotusTab for additional styling options.
  • lotusIcon - the class that goes on leading icons inside tabs.
  • lotusTabClose - the class that goes on the close icon anchor.
  • lotusSearch - see search component.
  • lotusTitleBarExt - goes on the outermost node for the area under the title bar.
  • lotusWrapper, lotusInner - classes on inner nodes of lotusTitleBarExt for additional styling options.
  • lotusInlinelist - a class used on the list of action links.
  • lotusActions - a class used on the list of action links.

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 a lotusText span in a h2 tag with the class lotusHeading. If you want the title to be a link, use an anchor instead of a span.

If you desire an icon, include an img with the lotusIcon class before the lotusText span in lotusHeading.

If you desire a search box, wrap the header icon and title, and tab structure in a lotusTitleBarContent node. This allows content to wrap around the search box. Do not include the search scope text from the search component.

If you need action links under the title bar, include the lotusTitleBarExt structure.

Tabs - If you are including tabs, add the lotusTitleBar2Tabs class to the lotusTitleBar2 node. If lotusHeading has an icon, make sure it is a 16px icon. If the tab has a close icon, add the lotusTabClosable class and the lotusTabClose structure. If the tab has a leading icon, add a lotusIcon img as the first child in lotusTabInner.

Tab JavaScript - JavaScript is used to trigger a hover effect on lotusTab when the close icon (lotusTabClose) has focus. The hover effect is provided by pseudo-classes on lotusTab as well as a lotusHover class that is added/removed by JavaScript. Without JavaScript, the tab hover effect is removed once hover goes to a different anchor, lotusTabClose. The Activity Stream example page uses a similar technique for hover effects on posts that contain multiple actionable items.

Accessibility

If using HTML5, wrap the banner and title bar in a header element and assign it the landmark role="banner". (Wrap the components with a div assigned role="banner" if not using HTML5.)

The title bar follows the Site Navigation design pattern and, specifically, the flat navigation pattern and is and marked up as a tool bar.

When the title bar contains tabs, put role="navigation" on the html5 navigation element that wraps the tabs (if not using html5, you can use a div instead of nav). Put role="toolbar" on the lotusNavTabs ul tag.

Add an aria-label="[Application]" to the nav element where [Application] is the name of the application you are in (e.g. mail, blogs, wikis, etc.).

Put role="presentation" on the tab li elements.

Put role="button" on each link. For the selected tab, put aria-pressed="true".

See the Tool Bar design pattern in the WAI-ARIA 1.0 Authoring Practices guide for more information.

Put the search landmark role on the search form.

As the search scope changes, update the alt text on the scope image to the current selection.

Examples

Sample HTML - title bar (with optional active title)

Sample HTML - title bar with tabs

Sample HTML - title bar with title and tabs

Sample HTML - tab icons and tab close icons

CSS (titlebar2.css)

Theme CSS (titlebar2Theme.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 title bar 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 title bars - title only, title with tabs (requires some additional classes), and tabs only.

September 2010 - accessibility fixes to style using the lotusHeading class rather than the specific h2 tag. In the process, also needed to take lotusEllipsis off of the h2 tag and add it to a span tag surrounding the heading text.

January 2011 - starting using the lotusTitleBar2 class because of the multiple changes. The title bar now supports an image before the title. Buttons traditionally in the place bar are optionally in the title bar. An additional title bar with a site-level breadcrumb has been added that always ends in the page title. The title bar has a new global search.

February 2011 - added tabs with close and overflow icons. Added a new tab bar with option links at the bottom.

March 20, 2011 - Changed the lotusTitleBar2, lotusTabBar, and lotusLinkBar nodes from a HTML5 header to a div. If using HTML5, the banner, title bar, tab bar, and link bar should be wrapped in a header element.

March 21, 2011 - Absolutely positioned the global search to the top right and introduced a new class, lotusTitleBarContent, that allows text, buttons, and tabs to wrap around the search.

April 1, 2011 - Removed the tab bar and link bar markup and CSS.

April 28, 2011 - Removed the breadcrumb example.

September 2011 - Removed tab examples. Added the lotusTitleBarExt inline list. Reverted lotusGlobalSearch to the original lotusSearch. Changed the lotusRightCorner class to lotusWrapper.

December 2011 - Added new tab examples with new tab visuals. Structured the title bar to allow title and tab wrapping. Added support for icons in tabs.

February 22, 2012 - Updated the accessibility section to include the relevant site navigation ARIA design patterns.

March 8, 2012 - Updated the text for the aria-label on the product tab navigation links to say "[Application]."

May 7, 2012 - Updated the first title bar example to have an active title link.

See Also: