Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



View Source | Submit Feedback

Navigation and Action Patterns

Bottom Bar

If you are developing a web app and find that the number of actions a user can perform is more than the App Bar can handle, the best option is to overflow into a Bottom Bar.

We’ve seen that the App Bar can be used for placing actions.

For many sites, especially content driven sites, this will be enough space since there are relatively few actions available. However, web apps may find they have more actions for sections of their UI.

If you aren’t using a tab and you have too many actions to fit on the App Bar, place actions in a bar along the bottom.

TL;DR

  • Only consider using this approach if you aren't using a Tab Bar.
  • Stick to 5 items at most.
  • Use when you need to add more actions than the App Bar can hold.

The advantage of this is that you have more space for actions and it’s in a touch friendly area and gives you a secondary tier of actions.

Limit yourself to five actions at most, avoiding the buttons becoming too small and difficult to tap.

Next Sections

  1. App Bar
  2. Tab Bar
  3. Navigation Drawer
  4. Bottom Bar

Updated on 2014-01-06

Authors

Matt Gaunt

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 .