This content has been archived.

Table of Contents

Using full-screen menus to improve mobile navigation

Use the full-screen menu setting in the Skin form for enhanced mobile functionality and to provide a smooth and seamless mobile navigation experience.

To enable the "Show Menu" action:

  1. Open the targeted Skin form.
  2. From the Component styles tab, click the split-button icon. In the Controls column, select Menus.
  3. Select the Display "Show Menu" as full screen menu check box.

Once enabled, this feature offers improvement over the use of regular drop-down menus, which can be difficult to navigate on a mobile device.

139626_nofullscreenmenu.png

Mobile display without full-screen menus

These menus can instead be shown as full-screen overlays. Users can dismiss the menu by clicking X.

139626_withfullscreenmenu.png

Mobile display with full-screen menus and intuitive navigation icons

Additionally, the header displays the Navigation rule description. If there are child menu items, then the menu item label is displayed. The header can also be fully branded for both desktop and mobile.

For more information about the Show menu control, see Skin form – Components tab – Controls – Menus.

Suggest Edit

100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.