## 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).

## Header

The navigation module contains definitions for styling the `<header>` element, along with its contents (logo and links).

Variables
Variable | Type | Description | Sample value
--- | --- | --- | ---
$header-height | Height | The height of the `<header>` element | 44px
$header-back-color | Color | Background color for the `<header>` element | #263238
$header-fore-color | Color | Text color for the `<header>` element | #fafafa
$header-border-style | Border | Border style for the `<header>` element | 1px solid #424242
$header-margin | Margin | Margin for the `<header>` element | 0
$header-padding | Padding | Padding for the `<header>` element | 2px 8px
$header-box-shadow | Box shadow | Box shadow for the `<header>` element | 0 1px 3px rgba(0,0,0, 0.1)
$header-logo-name | String | Class name for the `<header>` element's logo | 'logo'
$header-logo-font-size | Font size | Font size for the `<header>` element's logo | 1.75em
$header-logo-line-height | Line height | Line height for the `<header>` element's logo | 1.2
$header-logo-margin | Margin | Margin for the `<header>` element's logo | 1px
$header-logo-padding | Padding | Padding for the `<header>` element's logo | 3px 0 0
$header-link-hover-color | Color | Hover color for the `<header>` element's links | #37474f
$header-link-margin | Margin | Margin for the `<header>` element's links | 2px 0 0
$include-header-sticky | Logical | Enables sticky `<header>` elements1 | true
$header-sticky-name | String | Class name for the sticky `<header>` element1 | 'sticky'

### Notes:

1. The value of `$header-sticky-name` will only be used if `$include-header-sticky` is set to `true`.

## Drawer

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

Variables
Variable | Type | Description | Sample value
--- | --- | --- | ---
$drawer-name | String | Class name for the drawer component | 'drawer'
$drawer-back-color | Color | Background color for the drawer component | #eceff1
$drawer-border-style | Border | Border style for the drawer component | 1px solid #bdbdbd
$drawer-border-radius | Border radius | Border radius for the drawer component | 2px
$drawer-border-radius | Border radius | Border radius for the drawer component | 2px
$drawer-width | Width | Width for the drawer component | 320px
$drawer-padding | Padding | Padding for the drawer component | 4px
$drawer-box-shadow | Box shadow | Box shadow for the drawer component | 0 1px 3px rgba(0,0,0, 0.1)
$drawer-mobile-breakpoint | Breakpoint | Breakpoint for the drawer component on mobile devices | 768px
$drawer-normal-height | Height | height of the drawer component on medium-sized and larger screens1 | calc(100vh - 48px)
$drawer-right-name | String | Class name of the right-aligned variant of the drawer component | 'right'
$drawer-peristent-name | String | Class name of the non-responsive variant of the drawer component | 'persistent'
$drawer-toggle-name | String | Class name of the toggle button of the drawer component | 'drawer-toggle'
$drawer-toggle-font-size | Font size | Font size of the toggle button of the drawer component | 2.5em
$drawer-toggle-line-height | Line height | Line height of the toggle button of the drawer component | 0.125
$drawer-toggle-top | Position top | Top position of the toggle button of the drawer component | 6px
$drawer-close-name | String | Class name of the close button of the drawer component | 'close'
$drawer-close-top | Position top | Top position of the close button of the drawer component | 12px
$drawer-close-right | Position right | Right position of the close button of the drawer component | 4px

### Notes:

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.