Skip to main content

 

 

 

 
Language:
 
Applies only to Traditional Web Apps
 
 
OutSystems

Navigation Bar

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

      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.

    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.

    Properties

    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

    • Blank - No custom styles are added (default value).
    • ''myclass'' - Adds the myclass style to the UI styles being applied.
    • ''myclass1'' ''myclass2'' - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    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

    • Blank - No custom styles are added (default value)
    • ''myclass'' - adds the myclass style to the UI styles being applied.
    • ''myclass1'' ''myclass2'' - adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    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.

    • Was this article helpful?