Quick overview

Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The navigation module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. header, nav and footer) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the navigation module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.

Quick start

To customize the navigation module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).


The navigation module contains custom classes and definitions for creating and styling a responsive drawer component.

VariableTypeDescriptionSample value
$drawer-nameString Class name for the drawer component'drawer'
$drawer-back-colorColor Background color for the drawer component#eceff1
$drawer-border-styleBorder Border style for the drawer component1px solid #bdbdbd
$drawer-border-radiusBorder radius Border radius for the drawer component2px
$drawer-border-radiusBorder radius Border radius for the drawer component2px
$drawer-widthWidth Width for the drawer component320px
$drawer-paddingPadding Padding for the drawer component4px
$drawer-box-shadowBox shadow Box shadow for the drawer component0 1px 3px rgba(0,0,0, 0.1)
$drawer-mobile-breakpointBreakpoint Breakpoint for the drawer component on mobile devices768px
$drawer-normal-heightHeight height of the drawer component on medium-sized and larger screens1calc(100vh - 48px)
$drawer-right-nameString Class name of the right-aligned variant of the drawer component'right'
$drawer-peristent-nameString Class name of the non-responsive variant of the drawer component'persistent'
$drawer-toggle-nameString Class name of the toggle button of the drawer component'drawer-toggle'
$drawer-toggle-font-sizeFont size Font size of the toggle button of the drawer component2.5em
$drawer-toggle-line-heightLine height Line height of the toggle button of the drawer component0.125
$drawer-toggle-topPosition top Top position of the toggle button of the drawer component6px
$drawer-close-nameString Class name of the close button of the drawer component'close'
$drawer-close-topPosition top Top position of the close button of the drawer component12px
$drawer-close-rightPosition right Right position of the close button of the drawer component4px


  1. The values of $drawer-normal-height should be the calculated value of the screen height minus the total height of the <header> element for best results.

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.