## 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 use the navigation module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's `<head>` to utilize the viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">

## Header

Logo
News |

The `<header>` HTML element is used for a page's top horizontal navigation menu. It can contain a unique `.logo` element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. The rest of the elements inside the `<header>` must be button elements (i.e. `<button>`, `<input type="button">`, `role="button"` or `.button`) in order to be styled properly. Textual separators between those can be added using `<span>` elements.

### Sample code

    <header>
      <a href="#" class="logo">Logo</a>
      <button>Home</button>
      <a href="#" class="button">News</a>
      <span>|</span>
      <button>About</button>
      <a href="#" role="button">Contact</a>
    </header>

### Notes

- The `<header>` element is partially responsive on smaller screen devices. More specifically, when the content inside it exceeds the width of the viewport (ie. overflows to the right), users will be able to scroll horizontally in order to see the rest of the menu.
- The `<header>` element does not display as `fixed` by default. You can, however, alter this CSS property manually, if you so desire.

    <header>
      <a href="#" class="logo">Logo</a>
      <button>Action 1</button>
      <a href="#" class="button">Action 2</a>
      <label class="button">Action 3</label>
    </header>

Do: You can mix different elements styled like buttons inside a `<header>` element. In fact, we strongly recommend doing so, if you need to.

    <header>
      <a href="#" class="button logo">Logo</a>
    </header>
    <!-- or -->
    <header>
      <a href="#" class="logo">Logo</a>
      <a href="#">Link</a>
    </header>

Don't: The `.logo` element should not be a `<button>` element, have the `.button` class or the `role="button"` attribute. On the other hand, links and labels in the `<header>` should not be without a `.button` class or a `role="button"` attribute. Ignoring this rule might cause unexpected behavior.

## Drawer

The drawer component is used to create responsive and collapsible navigation menus. To create the drawer system, follow the steps presented below:

- Inside your `<header>` element, add a `<label>` element with the `.drawer-toggle` class (remember to add the `.button` class to apply the necessary styles).
- Create an `<input type="checkbox">` element. Give it an `id` to be able to link it to the necessary interactive elements.
- Immediately after the previous `<input type="checkbox">`, create a `<div>` element with the `.drawer` class. This is where you will put your menu's contents.
- Add an empty `<label>` element inside your `.drawer`, adding the `.close` class to it.
- Finally, link the `.drawer-toggle` and `.close` elements to the `id` of your `<input type="checkbox">`.

Drawers are responsive and will expand into normal containers on larger screens. If you want to avoid this, add the `.persistent` class to both your `.drawer-toggle` and `.drawer` elements. You can also change the position of the drawer from the left side of the screen to the right by applying the `.right` class to your `.drawer` element.

### Sample code

    <header>
      <label for="drawer-checkbox" class="button drawer-toggle"></label>
    </header>

    <input type="checkbox" id="drawer-checkbox">
    <div class="drawer">
      <label for="drawer-checkbox" class="close"></label>
      <a href="#">Home</a>
    </div>

### Notes

- The `.drawer` component can be easily and effectively combined with the grid module's system and classes, as well as the utility module's responsive visibility helper classes to create fully responsive navigation menus.
- It's best to use the `.drawer` component in combination with a `<header>` element that has the `.sticky` class (check the last section of this page).

    <nav class="drawer">
      <label for="drawer-checkbox" class="close"></label>
      <a href="#">Home</a>
    </nav>

Do: You can apply the `.drawer` class to a `<nav>` element, effectively making your page's navigation menu collapse on smaller screen sizes.

    <input type="checkbox" id="drawer-checkbox">
    <!-- Other stuff here -->
    <div class="drawer">
      <h3>Bad drawer</h3>
    </div>

Don't: The syntax and structure of the drawer container is very strict. Try to follow it exactly as described in this section.

    <div class="row">
      <input type="checkbox" id="drawer-checkbox">
      <div class="drawer col-md-4">
        <label for="drawer-checkbox" class="close"></label>
        <a href="#">Home</a>
      </div>

      <div class="col-sm-12 col-md-8">
        <p>Page content</p>
      </div>
    </div>

Do: You can combine the `.drawer` component with the grid system, similarly to any other element or component. The `.drawer` will be displayed as a slide-in menu on smaller screens, but it's part of the layout on medium-sized and larger screens.

    <header>
      <label for="drawer-checkbox" class="button drawer-toggle persistent"></label>
    </header>
    <input type="checkbox" id="drawer-checkbox">
    <div class="drawer">...</div>
    <!-- or -->
    <header>
      <label for="drawer-checkbox" class="button drawer-toggle"></label>
    </header>
    <input type="checkbox" id="drawer-checkbox">
    <div class="drawer peristent">...</div>

Don't: Remember to apply the `.persistent` class to the `.drawer-toggle` and `.drawer` elements to avoid unexpected behavior.

## Sticky headers and footers

You can create sticky headers and footers, using the `.sticky` class on either of these elements.

### Sample code

    <header class="sticky">
      <a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
    </header>

    <footer class="sticky">
      <p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
    </footer>

### Notes

- Sticky headers and footers are compatible with modern browsers, but might not display properly in older browsers. Support is being added over time, so be sure to check out if your target platforms support `position:sticky`.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.