Listview introduction

By default, all listviews in a menu will have basic styling. If you want to add some more detailed styling to the listviews, add the preferred listview style to the extensions option.

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

Example

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

  • Don't change listitems.
  • Vertically justify the listitems.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Available styles

listview-justify
Makes the listitems vertically justified.

CSS variables for the "listview" extension

The "listview" extension has no CSS variables. Note that if you want to change the height of the listitems, you can use the --mm-listitem-size CSS variable.

SCSS variables for the "listview" extension

Variable Datatype Default value Description
Include CSS
$mm_include_listview Boolean true Whether or not to include CSS for the listview extension throughout the entire CSS framework.
$mm_include_listview_justify Boolean $mm_include_listview Whether or not to include CSS for a justified listview throughout the entire CSS framework.
$mm_include_listview_inset Boolean $mm_include_listview Whether or not to include CSS for an inset listview throughout the entire CSS framework.
$mm_include_listview_spacer Boolean true Whether or not to include CSS for spacers in listviews throughout the entire CSS framework.

Configuration for the "listview" extension

The "listview" extension uses values in the classNames option.

Option Datatype Default value Description
className
{
divider String "Divider" The classname on a LI that should be displayed as a divider.
inset String "Inset" The classname on a submenu (a nested UL) that should be displayed as a default list.
spacer String "Spacer" The classname on a LI that should be displayed with more whitespace above it.
}

Next extension:
Multiline