Page slider like on

I would like to implement a ''page slider'' like on (Like the cog wheel, and when you click on it a small popout appears). I can re-create something like this with the sidebar toggle in the layouts, but that does not seem to work in the same way (The button does not move with the page, and the sidebar is full screen size) I've tried looking for a widget that supports what I need, but can't seem to find anything. Am I missing something, or should I dive into CSS to create what I want?
3 answers

You can create it with the sidebar toggle by:

  • step 0: use modeler version 5.18 or up
  • step 1: Create layout with a sidebar region
  • step 2: Place the class "toggle-area" on the sidebar region
  • step 3: Use the sidebartoggle widget and place it in the sidebar region
  • step3.1 (forgot this step) Place the class "toggle-btn" on the sidebartoggle button
  • step 4: Set the toggle on mode "slide over content" + select right region
  • step 5: use this css:


 .mx-scrollcontainer-toggleable.toggle-area .toggle-btn {
    position: absolute;
    right: 100%;
    top: 150px;
    display: block;
    width: 60px; 
    height: 60px;

    border-radius: 6px 0 0 6px;
    font-size: 19px;  

.mx-scrollcontainer-toggleable.toggle-area .mx-scrollcontainer-wrapper {
    overflow: visible;

There is - to my knowledge - no widget that supports your requested functionality. By looking at the CSS on it seems as though it is done using CSS. The div class switches from:

"deviceswitcher deviceswitcher-desktop" to "deviceswitcher deviceswitcher-desktop open"

So that would be your best bet.


This is custom piece of javascript. See the window.onload of that page and buttonservice.js. I doubt whether this can be implemented as a Mendix widget. If so, Mendix would have done it. It operates on the full page and changes the profile so a different layout and background is visible.