Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

Sidebar

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Shows additional content on the side of the screen.

    Use the Sidebar to place additional information in the margin of the main content. The additional information supports the end user's understanding of the main content.

    How to use

    To trigger the sidebar, call a new screen action through a button with Ajax submit and use the ToggleSidebar action (found in the Logic Tab) to open/close it. Use the parameters to define if it has Overlay in the page.

    1. Drag the Sidebar pattern into the preview.

    2. Set the content in the placeholders.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    HasOverlay When set to true enables a clickable overlay. Boolean False False
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    CSS Selectors

    Element CSS Class Description
    .sidebar .sidebar.is--hidden When Sidebar is closed
    .sidebar .sidebar.is--visible When Sidebar is open
    • Was this article helpful?