Breadcrumb

Overview

Many mobile apps share a common pattern for placement of buttons and other content. This content is typically positioned on the header or footer of the page which is easily accessible and on screen for quick actions. This page explains how you can apply this pattern for your own apps.

Mobile Page Header

The Breadcrumb Bar region position on any given Page Template within Universal Theme is designed to persist on large screens as the user scrolls. This is the position where the Breadcrumbs component, or Hero region, is typically placed.

By default, the contents of this region are not stuck to the top of the screen for small screen devices as it can take away valuable screen realestate on small screens. However, if you wish to persist this header to always be visible on a given page, you can add the following JavaScript API call to make this happen.

Steps

  1. Select the Page in Page Designer
  2. Modify the Template Options for the page and check the Sticky Header on Mobile option

Page Header Examples

Page Header Examples

Mobile Page Footer

You can configure a Buttons Container region so that it sticks to the bottom of the page for small screen devices. This could be useful for when you want to have one set of buttons for a given page and position them to the bottom when a small screen device is used.

Steps

  1. Create a Region with the region template set to Buttons Container
  2. Modify the Template Options for this region and check the Stick to Bottom on Mobile option

Page Footer Examples

Page Footer Examples