Skip to main content

Navigation drawer

The navigation drawer contains the navigation destinations for your app or site.

A working example of a navigation drawer is the left panel on this page. If you are on a desktop, the navigation drawer should be visible at all times on the left hand side of the browser window. If you are on a mobile or tablet, you may need to toggle open the navigation drawer by tapping on the hamburger icon near the top of this page.

Content

Material provides some basic styles for a set of components that are normally used in a navigation drawer such as headings and navs.

<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
  <div class="navdrawer-content">
    <div class="navdrawer-header">
      <a class="navbar-brand px-0" href="#">Navdrawer header</a>
    </div>
    <nav class="navdrawer-nav">
      <a class="nav-item nav-link active" href="#">Active</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
      <a class="nav-item nav-link" href="#">Link</a>
    </nav>
    <div class="navdrawer-divider"></div>
    <p class="navdrawer-subheader">Navdrawer subheader</p>
    <ul class="navdrawer-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="material-icons mr-3">link</i> Link with icon</a>
      </li>
    </ul>
  </div>
</div>

Usage

The navigation drawer plugin toggles your hidden drawer on demand, via data attributes or JavaScripts. It also adds .navdrawer-open{-default|-permanent|-persistent|-temporary}{-sm|-md|-lg|-xl} to the <body> for additional styling. The plugin also generates a .navdrawer-backdrop{-default|-permanent|-persistent|-temporary}{-sm|-md|-lg|-xl} to provide a click area for dismissing shown navigation drawer when required.

Data attributes

Activate a navigation drawer without writing JavaScript. Set data-toggle="navdrawer" on a controller element along with a data-target="#foo" or href="#foo" to target a specific navigation drawer to toggle.

<button data-target="#myNavdrawer" data-toggle="navdrawer" type="button">Launch navigation drawer</button>

JavaScript

Call a navigation drawer with id myNavdrawer with a single line of JavaScript:

$('#myNavdrawer').navdrawer(options)

Events

Material’s navigation drawer class exposes a few events for hooking into navigation drawer functionality. All events are fired at the navigation drawer itself (i.e. at the <div class="navdrawer">).

Event Type Description
hide.md.navdrawer This event is fired immediately when the hide instance method has been called.
hidden.md.navdrawer This event is fired when the navigation drawer has finished being hidden from the user (will wait for CSS transitions to complete).
show.md.navdrawer This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.md.navdrawer This event is fired when the navigation drawer has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
$('#myNavdrawer').on('hide.md.navdrawer', function (e) {
  // do something...
})

Methods

Activates a navigation drawer. Accepts an optional options object.

$('#myNavdrawer').navdrawer({
  keyboard: false
})

Manually hides a navigation drawer.

$('#myNavdrawer').navdrawer('hide')

Manually opens a navigation drawer.

$('#myNavdrawer').navdrawer('show')

Manually toggles a navigation drawer.

$('#myNavdrawer').navdrawer('toggle')

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name Type Default Description
breakpoint string '' Works with type to determine when the styles associated with a particular type kick in.
keyboard boolean true Closes the navigation drawer when escape key is pressed
show boolean true Shows the navigation drawer when initialised.
type string 'default' Different types of navigation drawers behave differently. For details regarding each type, see variations.

Variations

Direction

Add .navdrawer-right to the navigation drawer to make it stick to the right hand side of the screen.

<div aria-hidden="true" class="navdrawer navdrawer-right" id="navdrawerRight" tabindex="-1">...</div>

Permanent drawer

A permanent navigation drawer is always visible at the same elevation as the content.

<button data-target="#navdrawerPermanent" data-toggle="navdrawer" data-type="permanent" type="button">Launch permanent drawer</button>

<div aria-hidden="true" class="navdrawer navdrawer-permanent" id="navdrawerPermanent" tabindex="-1">...</div>

You can also add additional breakpoint parameters (i.e. sm, md, lg and xl) to a navigation drawer so that the permanent styles only kick in when the screen reaches a certain breakpoint.

<button ... data-breakpoint="lg" data-toggle="navdrawer" data-type="permanent" ...>...</button>

<div ... class="navdrawer navdrawer-permanent-lg" ...>...</div>

Because a permanent navigation drawer is always visible, you may need to add some custom styles to shift the content of your page to the left or right to accommodate the screen estate being taken up by the drawer. For example, to work with a .navdrawer-permanent-lg:

@include media-breakpoint-up(lg) {
  .content-wrapper {
    margin-left: $navdrawer-width;
  }
}

Clipped permanent drawer

A permanent navigation drawer has a few variations of its own, too. It can be clipped under the top navigation bar (.navbar):

<div aria-hidden="true" class="navdrawer navdrawer-permanent navdrawer-permanent-clipped" id="navdrawerPermanentClipped" tabindex="-1">...</div>

Float permanent drawer

For pages that require less hierarchy, a floating permanent drawer may be the best fit:

<div aria-hidden="true" class="navdrawer navdrawer-permanent navdrawer-permanent-float" id="navdrawerPermanentFloat" tabindex="-1">...</div>

A floating permanent drawer can also work with other components, such as .card:

<div aria-hidden="true" class="navdrawer navdrawer-permanent navdrawer-permanent-float" id="navdrawerPermanentFloatCard" tabindex="-1">
  <div class="navdrawer-content">
    <div class="card m-3">
      <nav class="navdrawer-nav">...</nav>
    </div>
  </div>
</div>

Persistent drawer

A persistent navigation drawer can be closed and opened, but unlike a default drawer, a persistent drawer sits on the same surface elevation as the content so it does not generate a backdrop.

<button data-target="#navdrawerPersistent" data-toggle="navdrawer" data-type="persistent" type="button">Launch persistent drawer</button>

<div aria-hidden="true" class="navdrawer navdrawer-persistent" id="navdrawerPersistent" tabindex="-1">...</div>

You can also add additional breakpoint parameters (i.e. sm, md, lg and xl) to a navigation drawer so that the persistent styles only kick in when the screen reaches a certain breakpoint.

<button ... data-breakpoint="lg" data-toggle="navdrawer" data-type="persistent" ...>...</button>

<div ... class="navdrawer navdrawer-persistent-lg" ...>...</div>

Temporary drawer

A temporary navigation drawer can be closed and opened and sits above all other content, but unlike a default drawer, a temporary drawer does not generate a backdrop so it can remain open while you perform other actions on the page.

<button data-target="#navdrawerTemporary" data-toggle="navdrawer" data-type="temporary" type="button">Launch temporary drawer</button>

<div aria-hidden="true" class="navdrawer navdrawer-temporary" id="navdrawerTemporary" tabindex="-1">...</div>

You can also add additional breakpoint parameters (i.e. sm, md, lg and xl) to a navigation drawer so that the temporary styles only kick in when the screen reaches a certain breakpoint.

<button ... data-breakpoint="lg" data-toggle="navdrawer" data-type="temporary" ...>...</button>

<div ... class="navdrawer navdrawer-temporary-lg" ...>...</div>