Multiline introduction

By default, all listitems will be truncated with an ellipsis to fit on a single line. If you don't want to truncate listitems to a single line, add "multiline" to the extensions option.

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

If you want the text over multiple lines of only some listitems, add "mm-multiline" to either the listview or listitem classname.

<body>
    <nav id="my-menu">
        <ul>
            <li><a href="#">A very long text on a menu item that will be truncated to fit on a single line.</a></li>
            <li class="mm-multiline"><a href="#">A very long text on a menu item that will NOT be truncated to fit on a single line.</a></li>

Example

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

  • Truncated listitems to a single line.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

CSS variables for the "multiline" extension

The "multiline" extension has no CSS variables.

SCSS variables for the "multiline" extension

Variable Datatype Default value Description
Include CSS
$mm_include_multiline Boolean true Whether or not to include CSS for the multiline extension throughout the entire CSS framework.

Next extension:
Page dim