Border style introduction

By default, all listitems in a listview will have an indented border. If you want to change the borders in listviews, add the preferred border style name to the extensions option.

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

Example

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

  • Use the default border style.
  • Use the "full" border style.
  • Use the "none" border style.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available styles

border-full
Makes the menu item borders not indented.
border-none
Makes the menu item borders disappear.

CSS variables for the "borderStyle" extension

The "borderStyle" extension has no CSS variables.

SCSS variables for the "borderStyle" extension

Variable Datatype Default value Description
Include CSS
$mm_include_borderstyle Boolean true Whether or not to include CSS for the borderStyle extension throughout the entire CSS framework.
$mm_include_borderstyle_none Boolean $mm_include_borderstyle Whether or not to include CSS for the "none" border style throughout the entire CSS framework.
$mm_include_borderstyle_full Boolean $mm_include_borderstyle Whether or not to include CSS for the "full" border style throughout the entire CSS framework.

Next extension:
Effects