Navigation drawer

The navigation drawer is a component that can be triggered from the app bar. You can use the navigation drawer in a couple of ways. You can use the default drawer which has a full height and clipped option or the modal drawer. It's also possible to add a header or a small header.

Default drawer

The default drawer has 2 option you can choose from. These options are full-height and clipped The full-height will cover the entire screen height while the clipped option remains below the app bar.

In order to make a navigation drawer item active you need to add the .drawer__item--active class to the .drawer__item element. When this class is added to a sub menu item it makes sure the sub menu is opened automatically.

Basic markup for the navigation drawer

    
<nav class="drawer" id="drawer">
    <ul>
        <li><a href="../" class="drawer__item"><span class="drawer__item__content">Home</span></a></li>
        <li><a href="../getting-started.html" class="drawer__item"><span class="drawer__item__content">Getting started</span></a></li>
        <li>
            <div class="drawer__item drawer__item__parent"><span class="drawer__item__content">Layout</span></div>

            <ul class="drawer__item__children">
                <li><a href="../layout/grid.html" class="drawer__item"><span class="drawer__item__content">Grid</span></a></li>
                <li><a href="../layout/shadow.html" class="drawer__item"><span class="drawer__item__content">Shadows</span></a></li>
            </ul>
        </li>
    </ul>
</nav>

Active menu item

    
<li>
    <a href="./navigation-drawer.html" class="drawer__item drawer__item--active">
        <span class="drawer__item__content">Navigation drawer</span>
    </a>
</li>

Full height

To make the default drawer full height all you need to do is add the .drawer--full-height class to the .drawer element.


                        <nav class="drawer drawer--full-height" id="drawer">

Clipped

To make the default drawer clipped all you need to do is add the .drawer--clipped class to the .drawer element.


                        <nav class="drawer drawer--clipped" id="drawer">

Header

For the header you have 2 options. The default header or a small header.

The default header has a optional background image. When you don't use a background image you can still use a background color.

It is also possible to add a divider below the header. You can simply do this by adding the .drawer__header--divider class to the .drawer__header element.

    
<li class="drawer__header">
    <img src="//placeimg.com/256/112/arch" class="drawer__header__background">
    <img src="//randomuser.me/api/portraits/men/85.jpg" class="drawer__header__profile-image">
    <span class="drawer__header__profile-name">John Doe</span>
    <span class="drawer__header__profile-email">johndoe@example.com</span>
</li>

Small header

The small header has the same height as the app bar. To use the small header all you need to do is add the .drawer__header--small class to the .drawer__header element.

    
<li class="drawer__header drawer__header--small">
    <img src="//randomuser.me/api/portraits/men/85.jpg" class="drawer__header__profile-image">
    <span class="drawer__header__profile-name">John Doe</span>
</li>

Fixed

It is also possible to use a fixed drawer. With the fixed drawer the drawer remains visible on larger screen sizes. This also means that the content is pushed over more. In order to use the fixed drawer you need to change a couple of elements.

On the drawer you need to add the .drawer--fixed class.

On the .container you need to add the .container-drawer--fixed class.

On the .app-bar you need to add the .app-bar-drawer--fixed class.

    
<nav class="drawer drawer--fixed" id="drawer">

    
<main class="container container-drawer--fixed">

    
<header class="app-bar app-bar-drawer--fixed">