Tabs

The user wants a simple way of accessing different sections of the content.

Problem

The user wants a simple way of accessing different sections of the content.

Solution

Use tabs to make it easy to explore and switch between different views, pages and functional aspects of an app.

As a navigational pattern use it to organize content at a high level. Think of genres in a music player.

When showing more options that fit the width of the screen use scrollable tabs.

Don't nest tabs under other tabbed content. Highlight the tab that is corresponding to the visible page.

Showing 3 live examples
Scrollable Tabs
Scrollable Tabs
This example should be experienced in full screen
View in full screen
Navigation

iPhone 6

Bigger than bigger

Accessories

The perfect fit.
And finish

Make a statement. Cover every curve. Get fully charged. See all the essential Apple-designed accessories and more for iPhone 6 and iPhone 6 Plus.

Compare iPhone

Compare iPhone 6 Plus with iPhone 6
iPhone 6 Plus
iPhone 6
Overview
Available in silver, gold, and space gray, iPhone 6 Plus features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.
Available in silver, gold, and space gray, iPhone 6 features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.

The biggest iOS release ever.

iCloud

iCloud connects you and your Apple devices in amazing ways. It makes sure you always have the latest versions of your most important things — like documents, apps, notes, and contacts — on whatever device you are using. It lets you easily share photos, calendars, locations, and more with friends and family. It even helps you find your device if you lose it. And iCloud does it all automatically. Just like that.
Navigation
This example should be experienced in full screen
View in full screen
Segmenting
Segmenting
This example should be experienced in full screen
View in full screen

Problem

The user wants a simple way of accessing different sections of the content.

Solution

Use tabs to make it easy to explore and switch between different views, pages and functional aspects of an app.

As a navigational pattern use it to organize content at a high level. Think of genres in a music player.

When showing more options that fit the width of the screen use scrollable tabs.

Don't nest tabs under other tabbed content. Highlight the tab that is corresponding to the visible page.

Implement these patterns and more with Mobiscroll (Tools for productive developers)
Previous Cards Next Lazy signup
Share in SMS
  • SMS
  • Email