Tab Bar Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.0.2 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 27-Apr-2011

Tabs are the primary UI method to organize application content. The Tab Bar and its associated navigation components allow the user to move through and perform work with FusionFX applications. There are multiple Tab Bar configurations, each with specific recommendations for usage.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Secondary Windows Dialogs Nested dialogs as an alternative to dialog window tabs.
Train All Guided process as an alternative to dialog window tabs.
Page Layout All Creating an additional set of navigation links in the main content region as an adjunct or alternative to tab navigation.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:commandNavigationItem Creates tabs inside of a navigation pane.
af:navigationPane hint=tab Does not support decorative box for level 3 tabs. Does not support Lower (bottom) tabs. There is no built-in support for Close icon — teams must code it themselves. Close icon will appear at the end of the tab bar (rather than within each tab).
af:panelTabbed Not used for level 4 tab bars; supports Close icon through the tab removal attribute.

General Principles Bookmark this Heading Return to Top

Purpose:

Organize application pages in a meaningful structure and provide a navigation method for moving from one application area to another.

Usage:

Application content should be distributed relatively equally among all levels of navigation. For instance, one section should not have 80% of the application content and functionality, while three other tabs share only 20%. It is recommended to assess all the content and functionality of an application before determining levels of navigation to prevent poor information design.

Tab Bar Elements Bookmark this Heading Return to Top

A Tab Bar may contain the following elements:

  • Tabs
  • Status Icon
  • Close Icon
  • Overflow List
  • Create Icon

Elements of the tab bar on a page: Status icon, a selected tab, a sample unselected tab, a sample disabled tab, an overflow icon, create button, and close button.

Tab Bar Elements

Tabs Bookmark this Heading Return to Top

Purpose:

Tabs organize application content and provide navigation between content areas.

Description:

  • Tabs may contain a text string, an icon, or both.
  • Tabs may contain a Close icon.
  • Tab text does not wrap and cannot be truncated.
  • If the application window is not wide enough to display all the tabs in the Tab Bar, some of the tabs move into the Overflow Panel. See Overflow List below for details.

Only tabs displayed by af:panelTabbed support the attribute, tabRemoval, which shows a Close icon within the tab. To add a Close Icon to tabs displayed by af:navigationPane, (hint=tabs), teams must hand code this feature—a Close icon should appear at the end of the tab bar, rather than within each tab.

Usage:

  • Tabs may contain status icons.
  • There is no technical limit to the length of tab text, but product teams should use concise terms to avoid overly long tabs in translation and reduce the number of tabs forced into the Overflow Panel.
  • Product teams can assign custom access keys to navigate among tabs.

Status Icon Bookmark this Heading Return to Top

Purpose:

Notifies the user of the status of the current object or content area.

Description:

  • The status icon is an informational, non-clickable icon.
  • When used, a status icon appears at the start of the tab text.
  • A tab may only contain a single status icon.

Usage:

  • Status icons contain a glyph that visually represents the type of status.
  • Each status icon should have a tooltip containing the status icon's name or purpose.
  • Icons must be visually distinct from other application icons.

Close Icon Bookmark this Heading Return to Top

Purpose:

Allows users to remove a tab from the Tab Bar.

Description:

  • The Close icon is a clickable icon that removes the tab from the Tab Bar.
  • When used, the Close icon appears at the end of the tab text only if it has been displayed using panelTabbed.
  • Third-level tabs (navigationPane hint=tabs) do not have built-in Close functionality. Teams must manually code Tab removal when using navigationPane hint=tabs, and the Close icon should appear to the right of all tabs on the tab bar, rather than within each individual tab.
  • The Close icon is not supported on disabled tabs. The Close icon appears on mouseover.

Close tab icon appearing on mouseover in a primary tab.

Close Tab Icon on Mouseover, Primary Tabs

Usage:

  • If the Close icon appears on one tab, it must either appear on all tabs or it must appear on all tabs except the last tab. This prevents users from closing all of the tabs in the Tab Bar.
  • Teams may choose to display a dialog window asking users to confirm their decisions to close the tab if the user is at risk of losing unsaved changes.
  • When using the Close icon, the following behavior is recommended:
    • When the user clicks the Close icon in a selected tab, the selected tab and tab content disappear, and the following tab (the tab after the closed tab), becomes the selected tab.
    • When the user clicks the Close icon on an unselected tab, the unselected tab disappears—the selected tab remains selected.
    • If the selected tab being closed is the last tab, and the Overflow panel is empty, the tab before the closed tab becomes the selected tab.
    • If a keyboard action is used to close an unselected tab, keyboard focus will go to the next tab bar, unless the tab being closed is the last tab—then keyboard focus will go to the previous tab.

Only tabs displayed by af:panelTabbed support the attribute, tabRemoval, which shows a Close icon within the tab. To add a Close Icon to tabs displayed by af:navigationPane, (hint=tabs), teams must hand code this feature—a Close icon should appear at the end of the tab bar, rather than within each tab.

Overflow List Bookmark this Heading Return to Top

Purpose:

Provides access to tabs that cannot fit into the space available for the Tab Bar.

Description:

  • Tabs move into overflow when the space available is not enough to display the full tab name. This may occur because of the number and length of tab names, or because the user has resized the application window so that it is too narrow to display the full set of tabs.
  • Users display the Overflow List by clicking an Overflow icon.
  • When tabs move into overflow, Overflow icons dynamically appear at the end of the Tab Bar, the start of the Tab Bar, or both, depending on which tab is selected.
  • Each Tab Bar has its own Overflow list. That is, a Level 1 Tab Bar may have one overflow list and a Level 2 Tab Bar may have its own, separate overflow list, too.
  • When the user resizes the browser window, the Tab Bar responds by extending or contracting to match the width of the window.
  • As the tab bar region extends or contracts, tabs may populate or be removed from the Tab Bar as a result of increased or decreased horizontal space.
  • At least one tab must always remain visible on the Tab Bar.
  • Tabs removed from the Tab Bar move into the overflow list; tabs populating the Tab Bar are removed from the overflow list.
  • Tabs move to the overflow list from end to start. In other words, when a Tab Bar is resized to be smaller, the last tab in the Tab Bar is the first to move into the overflow list.
  • Tabs move to the Tab Bar from the overflow list from start to end. In other words, when a Tab Bar is resized to be wider, the first tab in the overflow list moves onto the Tab Bar.

Create Icon Bookmark this Heading Return to Top

Purpose:

Allows the user to create a new tab and define its content.

The Create Tab option is not provided directly by ADF, but product teams can code it if needed.

A Create Tab dialog appearing on a page.

Create Tab

Usage:

  • When used, the Create icon should be placed at the end of the Tab Bar after the Overflow icon (if it exists).
  • The Create tab option may be implemented at any or all tab levels.
  • The tooltip text for the Create icon should be "Create [ObjectType]".
  • When using the Create icon in an application, the following behavior is recommended:
    • When the user clicks the Create button, a Create Tab dialog appears. Dialog content is application specific, but at minimum the dialog should contain a Name field.
    • The user inputs required information, and clicks OK.
    • The newly created tab becomes the selected tab, and appears after the previous selected tab.

Types of Tab Bars Bookmark this Heading Return to Top

FusionFX provides three types of Tab Bars. Each type of Tab Bar is located in a specific layer or region of the page, and features visually distinctive tabs:

  • Level 1 Tab Bar - Located in the application's primary layer.
  • Level 2 Tab Bar - Located in the application's secondary layer.
  • Level 3 Tab Bar - Two distinct types:
    • Within either the main content region or auxiliary content region of the page: Referred to as Subtabs
    • Within a dialog window: Referred to as Dialog Window Tabs
  • Level 4 Tab Bar - Located in either the main content region or auxiliary content region of the page.

The appearance of four levels of tab bars, as described in the text above the image.

Four Levels of Tab Bars

Note: A page may not contain more than one instance of a type of Tab Bar, but may combine Tab Bars of different types in a range of configurations. For details see Tab Bar Combinations below.

Level 1 Tab Bar Bookmark this Heading Return to Top

Purpose:

Level 1 Tabs provide the highest level of content organization in an application.

Level 1 tabs on a page, showing various tabs as they appear in their disabled state, as selected, as unselected, as selected on mouseover, and as unselected on mouseover.

Level 1 Tabs Only

Usage:

  • Minimum/Maximum: The minimum number of tabs on the Tab Bar is one, but it is recommended to have least two, unless overall product architecture makes this problematic to implement in a particular module. The maximum number is unlimited, but it is recommended to have no more than 9 tabs, to make the range of tabs easy to scan at a glance, and to avoid hiding too many tabs in overflow when tabs have long labels, especially when translated (estimate 100% growth of all text strings after translation).
  • Naming: Tab labels should represent content areas, not action items, and they should not be a mixture of both content and action. Labels do not wrap.
  • Defaults: By default, the first tab is the selected tab. Product teams may specify another tab to be selected by default. This is recommended when the sequence of tabs is not based on frequency of use, and users can safely bypass the first tab when performing many tasks.
  • Use with Other Components: The Level 1 Tab Bar may share the same horizontal space with a toolbar region or a quick search component. If a toolbar region or quick search is not used, the Level 1 Tab Bar consumes 100% of the width available.
  • Overflow: If the number of tabs within the Tab Bar exceeds the width available, excess tabs move into overflow. See the Overflow List section for details.
  • Persistence: Level 1 tabs should be persistent unless the user clicks a Global link.
  • Optional Actions: A Level 1 Tab Bar may contain a Create icon. See the Create Icon section for details.

Level 2 Tab Bar Bookmark this Heading Return to Top

Purpose:

When Level 1 tabs exist, Level 2 tabs act to categorize the contents of the selected Level 1 tab. When Level 1 tabs do not exist, Level 2 tabs fulfill the same purpose as Level 1 tabs.

Level 2 tabs on a page, showing various tabs as they appear in their disabled state, as selected, as unselected, as selected on mouseover, and as unselected on mouseover.

Level 2 Tabs

Usage:

A Level 1 tab may or may not have subordinate Level 2 tabs: Level 2 tabs appear only when the individual parent Level 1 tab has subordinate content sections.

  • Defaults: When a selected Level 1 tab has subordinate Level 2 content sections, the application can either set a specific Level 2 tab as the default, or set no default and instead display an overview of all the selected Level 1 content. Either option is valid, but the approach used should be consistent throughout the application:
    1. Level 2 Default Selection: In this model, when one of the Level 1 tabs is selected, one of the Level 2 tabs is selected by default, and the page displays the subset of Level 1 content defined by that Level 2 tab. The first Level 2 tab should be the default.
      • Using the web based store example above, if the "Books" Level 1 tab is selected, it may be appropriate that one of the Level 2 tabs, "Fiction," is automatically selected. The "Fiction" section may be the most popular section under the "Books" tab, and user tests reveal this to be the expected default section.
    2. No Default Level 2 Selection: When no default Level 2 tab is selected, a page appears that represents the total content of the application area defined by the selected Level 1 tab, and none of the Level 2 tabs in particular.
      • For example, the Level 1 tabs of a web based store may be "Clothing," "Books," "Shoes," and "Housewares." If the "Books" tab is selected, the page may redraw and show specific books that are on sale, plus the latest book releases. No Level 2 tabs are selected, but they would still be available, so that the user can easily filter the books section into categories such as "Fiction," "History," "Fantasy," and so on.
  • Categorizing Not Reorganizing: Level 2 tabs should not be used as various ways to view Level 1 tab information. Level 2 tab pages should be used as categories of all Level 1 tab information and/or categories of all the possible actions available for the selected Level 1 tab.
  • Minimum/Maximum: Minimally, a Level 2 Tab Bar should have at least two tabs. As with Level 1 tabs, the recommended maximum is 9 tabs, to make the range of tabs easy to scan at a glance, and to avoid hiding too many tabs in overflow when tabs have long labels, especially when translated (estimate 100% growth of all text strings after translation).
    • If it is not possible to structure application content and functionality within this maximum number, designers need to evaluate the benefits and drawbacks of increasing the number of tabs compared to imposing another level of tabs or alternate form of content organization.
  • Naming: Level 2 tabs should represent content areas, not action items. They should not be a mixture of both content and action.
  • Persistence: Level 2 tabs should be persistent unless the user navigates to a different Level 1 tab or Global link.
  • Optional Actions: A Level 2 Tab Bar may contain a Create icon. See the Create Icon section for details.

Level 3 Tab Bar Bookmark this Heading Return to Top

The Level 3 tab component may be used in two different ways:

  • Subtabs
  • Dialog window tabs

Subtabs Bookmark this Heading Return to Top

Purpose:

Subtabs act to subcategorize the contents of a higher level tab or the content within any page.

Level 3 subtabs on a page, showing them as they appear both at top of the page, and at bottom of a page; various subtabs shown as they appear in their disabled state, as selected, as unselected, as selected on mouseover, and as unselected on mouseover.

Subtabs

Usage:

  • Subtab Sections: Each Subtab content section name appears as a Subtab label on the Subtab bar. Selecting an individual Subtab causes that section's content to appear in the Subtab content area.
  • Upper & Lower Subtab Bars: Subtab bars may be placed either above or below the Subtab region, or in both locations.
  • Minimum/Maximum:
    • The Subtab Bar should have at least two tabs.
    • There should be a maximum of nine tabs, to make the range of tabs easy to scan at a glance, and to avoid hiding too many tabs in overflow when tabs have long labels, especially when translated (estimate 100% growth of all text strings after translation).
    • If it is not possible to structure application content and functionality within this maximum number, designers need to evaluate the benefits and drawbacks of increasing the number of tabs compared to imposing another level of tabs or alternate form of content organization, such as a set of links in a browse sequence.
  • Naming: Subtab sections and their labels should be content areas. The text label for a Subtab section does not wrap.
  • Defaults: The first subtab in the Subtab Bar should be the selected subtab by default.
  • Persistence: When the Subtab component is used, it is persistent throughout all Subtabs (regardless of the Subtab section selected).
    • The user may navigate away from the Subtabs by clicking a higher-level navigation component, such as a Global link, or a different Level 1 or Level 2 tab. At this point the Subtab component disappears until the user returns to the page containing the Subtabs.
    • The user may drill down to a subprocess by clicking a link or an action/navigation button within a Subtab section. This may display a dialog box or navigate to a separate page without the Subtab component. The user returns to the Subtab page by clicking an action/navigation button to confirm or cancel changes on the page or in the dialog.
  • Optional Actions: A Subtab bar may contain a Create icon. See the Create Icon section for details.

Dialog Window Tabs Bookmark this Heading Return to Top

Purpose:

Level 3 tabs in a dialog window act to categorize the contents of the dialog.

Tabs in a dialog window.

Dialog Window Tabs

Description:

  • Dialog windows support only a single Level 3 tab bar.
  • The dialog tab bar always appears across the top of the dialog.
  • Dialog windows support overflow lists; if the number of tabs exceeds the width of the containing region, an Overflow icon appears at the beginning and end of the tab bar. All tabs that do not fit in the dialog move into the Overflow List. See the Overflow List section for details.

Usage:

  • The dialog window tab bar is not mandatory within dialog windows.
  • When tabs exist in dialog windows, there must be at least two tabs and there is no limit on the number of tabs. Nevertheless it is recommended to display no more than nine tabs to make the range of tabs easy to scan at a glance, and to avoid hiding too many tabs in overflow when tabs have long labels, especially when translated (estimate 100% growth of all text strings after translation).
  • Consider implementing a tab bar within a dialog when:
    • The dialog contains many options,
    • The options can be logically divided into two or more sections,
    • The sections can be labeled with distinct, recognizable names.
  • If the dialog does not meet these criteria, consider the following alternatives:
    • A single large dialog.
    • Nested dialogs (up to three levels deep - see the Secondary Windows guideline).
    • A guided process (See the Train guideline).
    • A separate page instead of a dialog.
  • It is required for one tab to be selected within the dialog window. By default this is the first tab, but product teams may specify another tab to be selected by default. This is recommended when the sequence of tabs is not based on frequency of use, and users can safely bypass the first tab when performing many tasks.
  • By default, dialog tab bars must consume 100% of the containing region, but product teams may change this allocation to any percent. This is useful when dialogs have few tabs with short labels.
  • Dialog tab bars may contain a Create icon. See the Create Icon section for details.
  • Dialog window tab bars are completely independent of the tab bar configuration on the originating page.

Level 4 Tab Bar Bookmark this Heading Return to Top

Purpose:

Level 4 tabs act to subcategorize the contents of a higher level tab or the content within any page.

Level 4 tabs shown with separators between them, shown in their various states: enabled, selected, disabled, on mouseover/mousedown.

Level 4 Tabs

Usage:

  • Location: The Level 4 tab bar may appear anywhere in the main content or auxiliary content regions.
  • Minimum/Maximum:
    • The Level 4 tab bar should have at least two tabs.
    • There should be a maximum of nine tabs to make the range of tabs easy to scan, and to avoid hiding too many tabs in overflow when tabs have long labels, especially when translated. Estimate 100% growth of all text strings after translation.
    • If it is not possible to structure application content and functionality within this maximum number, designers need to evaluate the benefits and drawbacks of increasing the number of tabs compared to using another form of content organization, such as a set of links in a browse sequence.
  • Naming: Level 4 sections and their labels should be content areas. The text label for a Level 4 section does not wrap.
  • Defaults: The first tab in the Level 4 tab bar should be the selected tab by default.
  • Persistence: When the Level 4 tab bar component is used, it is persistent throughout all Level 4 tabs (regardless of the tab section selected).
    • The user may navigate away from the Level 4 tab bar by clicking a higher-level navigation component, such as a Global link, or a higher level tab. At this point the Level 4 tab bar component disappears until the user returns to the page containing the Level 4 tab bar.
    • The user may drill down to a subprocess by clicking a link or an action/navigation button within a Level 4 tab bar section. This may display a dialog box or navigate to a separate page without the Level 4 tab bar. The user returns to the Level 4 tab bar page by clicking an action/navigation button to confirm or cancel changes on the page or in the dialog.
  • Optional Actions: A Level 4 tab bar may contain a Create icon. See the Create Icon section for details.

Tab Bar Combinations Bookmark this Heading Return to Top

A page may contain one or more types of tab bars, or omit tab bars. The following matrix shows all recommended combinations:

Combination Description Usage
Level 1 Tabs Only Divide content into a set of tabs Useful for relatively small applications without deeply nested content, or larger applications with a structure that follows a data hierarchy exposed in a Tree or Tree Table.
Level 1 + Level 2 Tabs Divide content into a set of tabs and then subdivide the content in each tab. Useful for medium to large sized applications with moderately nested content, or smaller applications with disproportionately nested content under one or more Level 1 tabs.
Level 1 + 2 Tabs + Subtabs Divide and subdivide content to three levels of tabs. Useful for medium to large applications with deeply nested content in some content areas.
Level 1 + 2 Tabs + Subtabs + Level 4 Tabs Divide and subdivide content to four levels of tabs. Useful for large applications with deeply nested content and skilled users.
Level 1 Tabs + Subtabs Divide content into a set of tabs and then subdivide some tab content with subtabs. Useful for medium sized applications with moderately nested content under one or more Level 1 tabs.
Level 1 Tabs + Subtabs + Level 4 Tabs Divide and subdivide content to three levels of tabs. Useful for medium to large applications with deeply nested content in some content areas; allows option of switching from one set of subtabs to another using a radio group or other selection mechanism. See Level 4 Tab Bar above for an example.
Level 2 Tabs Only Divide content into a single set of tabs. Alternative to Level 1 Tabs Only: Used when switching between different areas of the same application, such as Reports, Requests, and so on.
Level 2 Tabs + Subtabs Divide content into a single set of tabs. Alternative to Level 1 Tabs + Subtabs: Used when switching between different areas of the same application, such as Reports, Requests, and so on.
Subtabs Only Divide content into a single set of tabs with persistent content in the upper portion of the page. Useful in smaller applications that need to repeat content at the top of each page, but the repeated content is too extensive for a context region.
No tabs Application uses different structural model. Useful in smaller applications that have other means of grouping content and navigating through pages, such as catalog style browse pages or a guided process.
Note: Product teams may also create an additional set of navigation links in the main content region, such as a catalog of items, or in an auxiliary content region, such as steps in a non-linear process. See the Page Layout guideline for more information.