Components

Navigation

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.

This guide contains
Navigation
  • Usage
  • Examples
  • Download

Usage

Websites

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. 

Top navigation bar with open multi-level flyout navigation.

Top navigation bar with open mega flyout menu.

Side drawer navigation, which is closable.

Vertical tab bar navigation on gradient background.

Floating menu button which can trigger a drawer or flyout.

Navigation hidden behind a burger menu button on the left side.

Navigation hidden behind a burger menu button on the right side.

A top drawer navigation, triggered by a burger menu button.

A flyout menu triggered by a burger menu button on the left side.

Apps

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.

See also:

Bottom tab bar with labels on white background.

Bottom tab bar with labels and maximum amount of tabs on a gradient background.

Bottom tab bar without label on white background.

Bottom tab bar without labels on a gradient backround.

In tablet applications labels in tab bars can be placed vertically centered to the corresponding icons. 

App header with burger menu button to open a side drawer.

Large app header with burger menu button to open a side drawer.

Bottom app bar with burger menu button to open a side or bottom drawer on white background.

Bottom app bar with burger menu button to open a side or bottom drawer on a greadient background.

Opened side drawer navigation.

Opened bottom drawer navigation.

Examples

Download

Sketch UI Library
ZIP
85.97 MB