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.
-
In Service Studio, in the Toolbox, search for
Navigation Bar.The Navigation Bar widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
-
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.
-
Add the required content to the Navigation Bar Item and Navigation Bar SubItem placeholders.
In this example we add
Phones,Audio, andAccessoriesto 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.
-
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.
Properties
Navigation Bar
| Property | Description |
|---|---|
| IsFixed (Boolean): Optional | If True, the navigation bar is always in the same position on the screen. This is the default value. If False, the navigation bar scrolls with the page content. |
| TopPosition (Integer): Optional | Set the top position when the navigation bar is fixed. |
| MultipleItems (Boolean): Optional | If True, multiple Navigation Bar Items can be opened at the same time. This is the default value. If False, only one Navigation Bar Item can be opened at a time. |
| ExtendedClass (Text): Optional | Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS. Examples
|
Navigation Bar Item
| Property | Description |
|---|---|
| IsActive (Boolean): Optional | If True, when the page is rendered, the Item is selected. If False, the Item is not selected. This is the default value. |
| IsOpen (Boolean): Optional | If True, when the page is rendered, the Navigation Bar Item is open. If False, the Navigation Bar Item is not open. This is the default. |
| ExtendedClass (Text): Optional | Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS. Examples
|
Navigation Bar Sub Item
| Property | Description |
|---|---|
| IsActive (Boolean): Optional | If True, when the page is rendered, the Sub Item is selected. If False, the Sub Item is not selected. |
Device compatibility
In Internet Explorer, position: fixed is used instead of position: sticky as the latter is not supported.