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.

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.