The established navigation patterns illustrated in this guide can and should be adapted based on the requirements and limitations of your website or app. This guide does not provide an exhaustive list and is intended to provide inspiration and allows you to quickly see a variety of options.
A variety of patterns for navigating websites or web apps have established themselves. So the one that suits the type and architecture of the site or app best should be chosen.
- A top bar navigation allows visitors to have a quick glance at the main sections of a site, while flyout menus allow them to dive in deeper. Flyouts can range from viewport covering mega flyouts to simple dropdown menus.
- With a side drawer menu, users can quickly jump between different locations within the site’s structure.
- A vertical tab bar is a space-saving option which can be a suitable choice for web apps.
- For less utilitarian, explorable web experiences, a floating menu button might do the job
- On smaller devices, the navigation can be hidden behind a burger menu button if it otherwise can not be fit into the screen due to the limited space available.
The most common top-level navigation for smartphone or tablet apps is the bottom tab bar with three to five tabs for smartphones or a few more for tablets. If a tab bar is not an option, map your app’s structure using a side or bottom drawer or an overflow menu. Side drawers are not common on iOS, so please try to avoid them there. The tab bar as well as the side and bottom drawers can either be plain white or incorporate the Postyellow gradient.