Breadcrumb

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.

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

Template Options

  • General

    • Use Template Defaults
    • Collapsed by Default
      This option will load the side navigation menu in a collapsed state by default.

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.

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

Template Options

  • Desktop

    Determines the display for a desktop-sized screen

    • Display labels inline
      Display the label inline with the icon and badge
    • Display labels above
      Display the label stacked above the icon and badge
    • Do not display labels
      Hides the label for the list item
  • Mobile

    Determines the display for a mobile-sized screen

    • Display labels
      Displays the label for the list items below the icon
    • Do not display labels