Tabs

Tabs are used as a navigational widget that let the user switch among sets of views. This way, a window may contain multiple views. See the Coding guide for details on how to implement tabs in your apps.

Characteristics

• Tab bars always fill the full horizontal width of the screen.
• You may have up to (but no more than) five tabs in a tab bar.
• Tab bars should be positioned at the very bottom of the screen, unless doing so would result in excessive clutter due to multiple bars of controls at the bottom of the screen.
• Tabs can contain a variety of elements, such as buttons, filters, indicators, and the like.
• Tabs' labels may be text, text with an icon, or just an icon.

Visuals

Below is a screen shot showing a fairly complicated screen; the tab bar is at the bottom, providing the primary interface for selecting views. At the top, just below the "Call Log" header, is a filter bar, letting the user switch between all calls and missed calls. These are both kinds of tab bars.

Tab states

Each tab has four possible states:

Normal

This is how the tab normally appears when not the active tab.

Pressed

When the user is holding a finger down on the tab, it's in the "pressed" state.

Active

The currently active tab—the one whose corresponding view is displayed—is in the "active" state.

Disabled

When a tab is disabled, it cannot be selected; its icon should be drawn with a grey cast.

Normal	Pressed	Active	Disabled

See also

• Tabs coding guide
• Firefox OS user experience