Navigation Bar

You can use the Navigation Bar UI Pattern to organize content and enable the user to navigate their way around your app using hyperlinks. You use this pattern when the user needs to navigate through an application's main sections while maintaining the ability to browse to another subsection.

How to use the Navigation Bar UI Pattern

The following use case adds the Navigation Bar UI Pattern to one screen. If you want the Navigation Bar to appear on multiple screens in your app, we recommend adding the pattern to a web block. For more information, see Create and Reuse Screen Blocks.

1. In Service Studio, in the Toolbox, search for Navigation Bar.

   The Navigation Bar widget is displayed.

   

2. From the Toolbox, drag the Navigation Bar widget into the Main Content area of your application's screen.

   

   By default, the Navigation Bar widget contains a Navigation Bar Item widget and a Navigation Bar SubItem widget. You can add or delete as many of these widgets as required.

3. Add the required content to the Navigation Bar Item and Navigation Bar SubItem placeholders.

   In this example we add Phones, Audio, and Accessories to the Navigation Bar Item Title placeholders.

   

   We also add links to the Navigation Bar SubItem Content placeholders. For each of the links, on the Properties tab, we add a link name and title, as well as the link destination.

   

4. On the Properties tab, you can also customize the Navigation Bar's look and feel by setting any of the optional properties.

   

After following these steps and publishing the module, you can test the pattern in your app.