Tileview introduction

By default, all lists will automatically be styled like a listview. If you want the lists to be styled like a tileview, add "tileview" to the extensions option.

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

If you want to style only some listviews like a tileview, add the classname "mm-tileview" to the listview.

<nav id="my-menu">
    <ul class="mm-tileview">
        <li><a href="#">Home</a></li>

Example

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

  • Use a tileview layout.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available tile-sizes

By default, all tiles will fill up 50% of the available width. Add one of the following classnames to a menu item to change its size.

mm-tileview-xs
Makes the tile fill up 12.5% of the available width.
mm-tileview-s
Makes the tile fill up 25% of the available width.
mm-tileview-l
Makes the tile fill up 75% of the available width.
mm-tileview-xl
Makes the tile fill up 100% of the available width.

CSS variables for the "tileview" extension

The "tileview" extension has no CSS variables.

SCSS variables for the "tileview" extension

Variable Datatype Default value Description
Include CSS
$mm_include_tileview Boolean true Whether or not to include CSS for the tileview extension throughout the entire CSS framework.
$mm_include_tileview_xs Boolean $mm_include_tileview Whether or not to include CSS for size XS tile throughout the entire CSS framework.
$mm_include_tileview_s Boolean $mm_include_tileview Whether or not to include CSS for size S tile throughout the entire CSS framework.
$mm_include_tileview_m Boolean $mm_include_tileview Whether or not to include CSS for size M tile throughout the entire CSS framework.
$mm_include_tileview_l Boolean $mm_include_tileview Whether or not to include CSS for size L tile throughout the entire CSS framework.
$mm_include_tileview_xl Boolean $mm_include_tileview Whether or not to include CSS for size XL tile throughout the entire CSS framework.