Skip to Main Content

Overview

Navigation within your application is critical to its success. When building applications for mobile, it is important to keep in mind the complexity of the application you are developing and which navigation pattern makes most sense for your specific use case. Here are two of the mobile-friendly navigation patterns available in Universal Theme and when to pick one over the other.

Side Menu

This common navigation pattern is typically referred to as a hamburger menu, drawer menu, or tree navigation and is well suited for applications that have many navigation items, or require nested navigation. On small screens, you simply tap on the hamburger icon near the top left (or top right when using right-to-left languages) corner of your screen and the menu will slide out. You can make a selection and immediately navigate to the selected item.

Instructions

Steps

  • Go to Shared Components → User Interface Attributes → Edit Desktop
  • Scroll to Navigation Menu and set Position to Side
  • Set the List Template to Side Navigation Menu

Tab Menu

Tabs are another very common navigation pattern for small screen devices. These tabs will automatically position themselves near the top or bottom of the screen depending on the device screensize. On small screens, the tabs menu will be displayed at the bottom of the screen allowing for comfortable use with one hand. On larger screens, the tabs will be near the top of the screen.

Instructions

Steps

  • Go to Shared Components → User Interface Attributes → Edit Desktop
  • Scroll to Navigation Menu and set Position to Top
  • Set the List Template to Top Navigation Tabs