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

Navigation bar

To add vertical navigation to your websites, use the <nav> HTML element. Adding links is pretty simple, just use <a> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the .sublink-1 class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the .sublink-2 class.

Sample code

<nav>
  <a href="#">Home</a>
  <span>News</span>
  <a href="#" class="sublink-1">New Courses</a>
  <a href="#" class="sublink-1">Certifications</a>
  <span class="sublink-1">Events</span>
  <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
  <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
  <a href="#" class="sublink-1">Policy Update</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Notes

Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the customization page for instructions on how to add more depth to the vertical navigation.
We strongly suggest you do not add irrelevant things inside your <nav> element, like images or text that are not part of the navigation menu.

<div class="col-sm-12 col-sm-last col-md-3 col-md-first">
  <nav>
    <!-- navigation content -->
  </nav>
</div>

Do: We strongly recommend using the <nav> element in combination with the grid module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.

Footer

The <footer> element is used to create your page's footer. As normal, add the <footer> at or near the end of your <body> element and add content to it like you would otherwise.

Sample code

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

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.