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

Go to the Common Web Flow.

Double-click on your Layout to open the widget tree.

Go to the LayoutTopMenu parameters.

Toggle the DeviceConfiguration 'plus icon'.

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.

Publish and test.

Customize your content max-width

Go to Themes.

In the Grid section, set your custom width (default value is 1280px) in the Max. Width parameter.

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: