Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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.

    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 Add custom style classes to the Navigation Bar UI 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 Navigation Bar UI styles being applied.
    • ''myclass1'' ''myclass2'' - Adds the myclass1 and myclass2 styles to the Navigation Bar UI styles being applied.
    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 Add custom style classes to the Navigation Bar Item UI 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 Navigation Bar Item UI styles being applied.
    • ''myclass1'' ''myclass2'' - adds the myclass1 and myclass2 styles to the Navigation Bar Item UI styles being applied.
    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?