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).
| 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:
- The value of
$header-sticky-namewill only be used if$include-header-stickyis set totrue.
Drawer
The navigation module contains custom classes and definitions for creating and styling a responsive drawer component.
| 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-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:
- The values of
$drawer-normal-heightshould 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.