Responsive Navigation Patterns

Need some help designing your app's navigation? These patterns are a great place to start. The following present several ways to handle navigation on large and small screens. Top and left navigation menus are common on larger screens, but are often not the optimal way to present information on small screens because of the reduced screen real estate. Therefore, it is necessary to consider the presentation of content and ease of navigation for all screen sizes.

Note: HTML/CSS for the corresponding patterns will be available soon.

Pattern 1: Top toggle menu

In this pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space. At that point, some items move from the top navigation to a drop-down menu. In the smallest screen, all navigation items live in a toggle menu, and the user has to tap to expand the toggle menu.

You could rank the item priorities to ensure the most important items always appear in the top navigation.

Pros:

  • one button in header maximizes space for content on a small screen
  • important items stay visiblein most screen sizes and you decide the item priorities
  • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit

Cons:

  • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
  • users may not notice the button contains a navigation menu in the smallest screen size
  • one more step is needed to access the hidden navigation items

wide UI layout with top toggle menu and three by two layout of content blocks

moderate width UI layout with top toggle menu and two by three layout of content blocks

moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip

narrow mobile layout with top toggle menu and smaller content blocks in two by three layout

Pattern 2: Expandable bottom menu

Similar to the first pattern, the top navigation items rearrange for smaller widths until there is not enough space. At that point, some items move from the top navigation to a drop-down menu. You could rank the item priorities to ensure the most important items always appear in the top navigation.

In the smallest screen, several items stay on the bottom of the screen, and the rest of the items are hidden. The user can flip the menu open and select from the rest of the navigation items. You could select the items that remain on the bottom.

Pros:

  • expandable menu is easy to discover
  • important items are always visible and you decide the item priorities
  • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit

Cons:

  • one more step is needed to access the navigation items that are hidden
  • navigation items might be less discoverable because some items are hidden
  • less space for content in the smallest screen size

wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.

narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.

Pattern 3: Left hidden menu

The main navigation is always on the left except in the smallest screen size, where the navigation menu is hidden in a button by default. In the smallest screen, when the user taps the button, the navigation menu slides into view and displays the navigation items.

Pros:

  • potentially displays more navigation items in a left navigation compared to a top navigation
  • most items are always visible except in the smallest screen size
  • one button in header maximizes space for content on a small screen

Cons:

  • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
  • users may not notice the button contains a navigation menu in the smallest screen size
  • one more step is needed to access the navigation items that are hidden

wide UI layout with vertical navigation menu down the left hand side

moderate layout with vertical navigation down the left hand side and narrower content area

moderate but short layout with vertical navigation down the left hand side and narrower content area

narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.

Attachments

File Size Date Attached by
desktop/wide tablet layout for top toggle menu
wide UI layout with top toggle menu and three by two layout of content blocks
10087 bytes 2013-09-26 02:32:23 chrisdavidmills
tablet layout for top toggle menu
moderate width UI layout with top toggle menu and two by three layout of content blocks
9584 bytes 2013-09-26 02:33:22 chrisdavidmills
wide mobile layout for top toggle menu
moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip
4840 bytes 2013-09-26 02:34:28 chrisdavidmills
narrow layout for top toggle menu
narrow mobile layout with top toggle menu and smaller content blocks in two by three layout
9126 bytes 2013-09-26 02:35:37 chrisdavidmills
desktop/wide tablet layout for expandable bottom menu
wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower
4430 bytes 2013-09-26 02:37:17 chrisdavidmills
tablet layout for expandable bottom menu
moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower
2872 bytes 2013-09-26 02:37:58 chrisdavidmills
wide mobile layout for expandable bottom menu
moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.
2603 bytes 2013-09-26 02:38:55 chrisdavidmills
narrow layout for expandable bottom menu
narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.
5837 bytes 2013-09-26 02:41:03 chrisdavidmills
desktop/wide tablet layout for left hidden menu
wide UI layout with vertical navigation menu down the left hand side
14168 bytes 2013-09-26 02:42:07 chrisdavidmills
tablet layout for left hidden menu
moderate layout with vertical navigation down the left hand side and narrower content area
8735 bytes 2013-09-26 02:43:52 chrisdavidmills
wide mobile layout for left hidden menu
moderate but short layout with vertical navigation down the left hand side and narrower content area
4605 bytes 2013-09-26 02:44:43 chrisdavidmills
narrow layout for left hidden menu
narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.
10117 bytes 2013-09-26 02:45:40 chrisdavidmills

Document Tags and Contributors

Contributors to this page: georgialyle, chrisdavidmills
Last updated by: georgialyle,