Tileview introduction

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

   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.tileview.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
            extensions: ["tileview"]

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>


Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Use a tileview layout.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {


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.

Makes the tile fill up 12.5% of the available width.
Makes the tile fill up 25% of the available width.
Makes the tile fill up 75% of the available width.
Makes the tile fill up 100% of the available width.

SCSS variables for the "tileview" extension

The "tileview" extension has no SCSS variables.

  • Core (on-canvas).
Incompattible with:

Next extension: