Skip to main content

Patterns

 

OutSystems

LayoutSideMenu

Custom layout with a menu on side.

Useful for applications with a complex navigation that you can make more efficient by using the available space on the side.

How to use

Fill in the placeholders with the content that you need.

Input parameters

Input Name Description Type Mandatory Default Value
ExtendedClass Adds custom style classes to this Block. Text False none
DeviceConfiguration Configuration to change the default values that set when the application is seen as phone, tablet or desktop. DeviceConfig False none

Layout and classes

Responsive behavior

This layout comes with a default responsive behavior. On tablets it remains the same as on desktop. But on phones it breaks the content vertically, making the placeholders Title and Actions full-width.

The menu also adapts to mobile, hiding the navigation sidebar, which can be toggled by a hamburger icon.

Advanced

Here are some more advanced use-cases of the widget.

Customize your responsive breakpoints

  1. Go to the Common Web Flow.
  2. Double-click on your Layout to open the widget tree.
  3. Go to the LayoutTopMenu parameters.
  4. Toggle the DeviceConfiguration 'plus icon'.
  5. Set your custom breakpoints (in pixels). On the example below the phone breaks is set to happen only when the Device with is at 200px.
  6. Publish and test.

Customize your content max-width

  1. Go to Themes.
  2. In the Grid section, set your custom width (default value is 1280px) in the Max. Width parameter.
  3. Publish and test.

Device compatibility

In Internet Explorer we made specific CSS that uses 'position: fixed' instead of 'position: sticky', as 'sticky' is not supported in Internet Explorer.

Notes

In Internet Explorer 10 and 11, we added some specific behaviors to account for the flicker caused by the slow loading time of polyfill CSS Variables. If there are any JavaScript errors, this will cause the screen to appear white.

To override this behavior, add the following code snippet to your CSS theme:

.ie10,
.ie11 {
   display: block;
}
  • Was this article helpful?