Navigation and Action Patterns
Tab Bar
A Tab Bar can be used as the main navigation for your site. It gives the user visibility of the main sections of your site as well as an easy way to identify where they are within your web app.
A Tab Bar can be used as the main navigation for your site. It gives the user visibility of the main sections of your site as well as an easy way to identify where they are within your web app.
The Tab Bar can be used to quickly switch between the sections of your site.
It’s only appropriate for sites with a relatively small structure, but users find it easy to glance at where they are, and where they can go, within your site.
TL;DR
Limit the total number of tabs to five or less, otherwise each icon and tap target becomes too small and users will struggle to hit the right tab.
Position your tabs above or below your main content, this is a trade off between what feels best to use and best suites your design.
One advantage to using tabs is that it gives the user a consistent place to go for navigation and makes it easy to glance at where they are within the site.
Updated on 2014-01-06
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .