Navigation

The navigation module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

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 all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. header, nav and footer) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. 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>` elements¹	true
$header-sticky-name	String	Class name for the sticky `<header>` element¹	'sticky'

Notes:

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

Navigation bar

The navigation module contains definitions for styling <nav> elements, along with the links they contain.

Variables
Variable	Type	Description	Sample value
$nav-back-color	Color	Background color for `<nav>` elements	#eceff1
$nav-fore-color	Color	Text color for `<nav>` elements	$fore-color
$nav-border-style	Border	Border style for `<nav>` elements	1px solid #bdbdbd
$nav-border-radius	Border radius	Border radius for `<nav>` elements	2px
$nav-margin	Margin	Margin for `<nav>` elements	2px
$nav-padding	Padding	Padding for `<nav>` elements	8px
$nav-box-shadow	Box shadow	Box shadow for `<nav>` elements	0 1px 3px rgba(0,0,0, 0.1)
$nav-link-fore-color	Color	Text color for `<nav>` elements' links	#1565c0
$nav-sublink-prefix	String	Class prefix for `<nav>` elements' subcategories	'sublink'
$nav-sublink-depth	Integer	Amount of `<nav>` elements' subcategories	2
$nav-sublink-padding-left	Padding left	Left padding for `<nav>` elements' subcategories	12px
$nav-include-sublink-bar	Logical	Enables the sidebar for `<nav>` elements' subcategories¹	true
$nav-sublink-bar-left-position	Position left	Left position of the sidebar for `<nav>` elements' subcategories¹	3px
$nav-sublink-bar-width	Border width	Width of the sidebar for `<nav>` elements' subcategories¹	1px
$nav-sublink-bar-color	Color	Color of the sidebar for `<nav>` elements' subcategories¹	#263238

Notes:

The values of $nav-sublink-bar-left-position, $nav-sublink-bar-width and $nav-sublink-bar-color will only be used if $nav-include-sublink-bar is set to true.

Footer

The navigation module contains various definitions for customizing the appearance of the <footer> element.

Variables
Variable	Type	Description	Sample value
$footer-back-color	Color	Background color for the `<footer>` element	#263238
$footer-fore-color	Color	Text color for the `<footer>` element	#fafafa
$footer-border-style	Border	Border style for the `<footer>` element	1px solid #424242
$footer-font-size	Font size	Font size for the `<footer>` element	85%
$footer-margin	Margin	Margin for the `<footer>` element	18px 0 0
$footer-padding	Padding	Padding for the `<footer>` element	10px
$footer-link-fore-color	Color	Text color for the `<footer>` element's links	#039be5
$include-footer-sticky	Logical	Enables sticky `<footer>` elements¹	true
$footer-sticky-name	String	Class name for the sticky `<footer>` element¹	'sticky'

Notes:

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

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.