Directives - md-sidenav

mdSidenav API Documentation

A Sidenav component that can be opened and closed programmatically.

By default, upon opening it will slide out on top of the main content area.

For keyboard and screen reader accessibility, focus is sent to the sidenav wrapper by default. It can be overridden with the md-autofocus directive on the child element you want focused.

Usage

<div layout="row" ng-controller="MyController">
  <md-sidenav md-component-id="left" class="md-sidenav-left">
    Left Nav!
  </md-sidenav>

  <md-content>
    Center Content
    <md-button ng-click="openLeftMenu()">
      Open Left Menu
    </md-button>
  </md-content>

  <md-sidenav md-component-id="right" md-is-locked-open="$mdMedia('min-width: 333px')" class="md-sidenav-right">
    <form>
      <md-input-container>
        <label for="testInput">Test input</label>
        <input id="testInput" type="text" ng-model="data" md-autofocus="">
      </md-input-container>
    </form>
  </md-sidenav>
</div>
 
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };
});

Attributes

Parameter Type Description
md-is-open expression expression

A model bound to whether the sidenav is opened.
md-disable-backdrop boolean boolean

When present in the markup, the sidenav will not show a backdrop.
md-disable-close-events boolean boolean

When present in the markup, clicking the backdrop or pressing the 'Escape' key will not close the sidenav.
md-component-id string string

componentId to use with $mdSidenav service.
md-is-locked-open expression expression

When this expression evaluates to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the md-is-open attribute.
md-disable-scroll-target string string

Selector, pointing to an element, whose scrolling will be disabled when the sidenav is opened. By default this is the sidenav's direct parent.

The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples:

  • <md-sidenav md-is-locked-open="shouldLockOpen"></md-sidenav>
  • <md-sidenav md-is-locked-open="$mdMedia('min-width: 1000px')"></md-sidenav>
  • <md-sidenav md-is-locked-open="$mdMedia('sm')"></md-sidenav> (locks open on small screens)