Learning Material Design Lite: Navigation

Navigation is a requisite UI on any website. Regardless of the scale—single page, or full-blown e-commerce—a website needs navigation to allow users to move through the pages and sections. Following our previous tutorial about the Material Design Lite Grid, in this instalment we are going to see how to use another MDL component: the Navigation.

Before you begin, don’t forget to include the MDL libraries; the stylesheets and the JavaScript within the head of your page:

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.which is googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Now, we can start building the navigation.

Basic Navigation

Navigation in MDL is a sub-component of Layout, along with the others like the grid, tabs, and the footer. The basic form of navigation in MDL comprises the site name, a couple of link menus, and an off-canvas navigation.

To create one, add an empty div with mdl-layout and mdl-js-layout attached. These two classes are required. The mdl-layout class applies predefined styles that basically ensure the UI component, mainly the Navigation, are laid out correctly. Meanwhile, the mdl-js-layout will add some dynamic behavior through JavaScript which includes adding new elements and a couple of extra classes to make the navigation function.

<div class="mdl-layout mdl-js-layout">
</div>

Within this div, create a header element with the mdl-layout__header class attached.

<div class="mdl-layout mdl-js-layout">
	<header class="mdl-layout__header">
	</header>
</div>

Then, create a new div with mdl-layout__header-row. This is the element where we will actually set the navigation in place.

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
    
    </div>
  </header>
</div>

Wrap the site name using a span element with mdl-layout-title class attached, then an anchor tag with a URL pointing to the homepage. You may replace the text with an image of your site logo as well.

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
    </div>
  </header>
</div>

Create a div below the site name with mdl-layout-spacer class attached. This div will add space between the site name, and eventually push the navigation to the right on the header.

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
</div>

Now, we add the navigation menus below the spacer using the nav element.

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Home</a>
        <a class="mdl-navigation__link" href="#">Blog</a>
        <a class="mdl-navigation__link" href="#">About</a>
        <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
    </div>
  </header>
</div>

Lastly, add a new div with the mdl-layout__drawer outside the header element to build the off-canvas navigation.

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Home</a>
        <a class="mdl-navigation__link" href="#">About</a>
        <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Acme</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Products</a>
      <a class="mdl-navigation__link" href="#">Services</a>
      <a class="mdl-navigation__link" href="#">Portfolios</a>
      <a class="mdl-navigation__link" href="#">Achievements</a>
      <a class="mdl-navigation__link" href="#">Blog</a>
    </nav>
  </div>
  </div>
</div>

As you reload the page, the off-canvas navigation should immediately be working; you should find the “hamburger” icon to toggle it on and off. Give it a go:

However, as you can see above, the navigation bar as well as the site name and the navigation menu is hidden. MDL purposely hides them when displayed through tablet-sized viewports. This is actually a considered decision from the MDL team. The horizontal menu is poorly adapted in terms of scaling horizontally, particularly if you have dozens of menus. At some point, it won’t fit in a narrow viewport and will most likely collapse or overlap the other UI in the navigation.

Nonetheless, if we would like to retain its visibility in a smaller viewport, add the mdl-layout--fixed-header inline with the mdl-layout class.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  ... more content here ...
</div>

This class will force the navigation to be visible on phones and tablets.

Adding a Search Form

Search forms are a common supplementary element in website navigation. They can be really helpful for users who may not be sure of which menu to go through to find the content they are looking for. With the search form, they can simply type and search.

Find the complete HTML to build the search form below the nav element

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  ... more content here ...
  <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Home</a>
      <a class="mdl-navigation__link" href="#">About</a>
      <a class="mdl-navigation__link" href="#">Contact</a>
  </nav>
  <!-- start search form -->
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="search-expandable" />
      <label class="mdl-textfield__label" for="search-expandable">Search text</label>
    </div>
  </div>
  <!-- end search form -->
  ... more content here ...
</div>

Herein we have actually defined two different MDL components, namely the Text Field and the Button. The button appears as a search icon which will expand the search input field when clicked:

Final Thought

The Navigation in MDL is an overwhelmingly huge component given the number of variations we can arrange for different scenarios. In this tutorial, we merely built a basic navigation by using the essential classes.

The navigation can be further extended with utility classes or by adding other components from MDL. For example, we can make the navigation background transparent and use a background image, set the off-canvas navigation to always visible, make the navigation un-sticky, and even replace the link menus with Tabs which may be useful for a single page website.

The Navigation component, however, is rather opinionated.

The navigation styles inspected through Chrome DevTools

The padding at the left side of the navigation which is set for 72px, for example, suggests that a navigation should have an off-canvas navigation with the “hamburger” icon. Sometimes, we may only need a decent navigation with basic features. Still, the navigation is a solid component. I'm looking forward to improvements and perhaps additional functionalities.

In the next tutorial, we’ll look into two components that we’ve already briefly looked at: Buttons and Text Fields. Until next time!