Skip to main content




Applies only to Traditional Web Apps




  • Edit
  • Custom layout with a fixed menu on top.

    Useful for simple applications, without a complex navigation structure.

    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, moving the navigation to a sidebar, toggled by a hamburger icon.

    On a mobile phone and tablet:


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

    Customize your responsive breakpoints

    1. Go to the Common 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.


    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:

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