Positioning introduction

By default, the menu will be positioned behind the page and slide the page out to the right. To change this behavior, add the preferred positioning name(s) to the extensions option.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                extensions: ["position-right", "position-front"]
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Position
  • Open the menu from the left (default).
  • Open the menu from the right.
  • Position the menu at the top.
  • Position the menu at the bottom
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available positions

position-right
Positions the menu at the right of the page.
position-top
Positions the menu at the top and in front of the page.
position-bottom
Positions the menu at the bottom and in front of the page.
position-front
Positions the menu in front of the page.

Note that position-top and position-bottom will also automatically position the menu in front of the page.

CSS variables for the "positioning" extension

The "positioning" extension has no CSS variables.