diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html
index fe7f020b5642..2e278d672083 100644
--- a/src/lib/sidenav/sidenav.html
+++ b/src/lib/sidenav/sidenav.html
@@ -1,4 +1,4 @@
-<div class="md-sidenav-backdrop" (click)="_closeModalSidenav()"
+<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
      [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="md-sidenav"></ng-content>
diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts
index 7949279ece82..5cb17badcbe7 100644
--- a/src/lib/sidenav/sidenav.spec.ts
+++ b/src/lib/sidenav/sidenav.spec.ts
@@ -194,6 +194,49 @@ describe('MdSidenav', () => {
         tick();
       }).not.toThrow();
     }));
+
+    it('should emit the backdrop-clicked event when the backdrop is clicked', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let openButtonElement = fixture.debugElement.query(By.css('.open'));
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(0);
+
+      let sidenavBackdropElement = fixture.debugElement.query(By.css('.md-sidenav-backdrop'));
+      sidenavBackdropElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+
+      endSidenavTransition(fixture);
+      tick();
+
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      let closeButtonElement = fixture.debugElement.query(By.css('.close'));
+      closeButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+    }));
+
   });
 
   describe('attributes', () => {
@@ -271,7 +314,7 @@ class SidenavLayoutTwoSidenavTestApp { }
 /** Test component that contains an MdSidenavLayout and one MdSidenav. */
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-layout (backdrop-clicked)="backdropClicked()">
       <md-sidenav #sidenav align="start"
                   (open-start)="openStart()"
                   (open)="open()"
@@ -288,6 +331,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeStartCount: number = 0;
   closeCount: number = 0;
+  backdropClickedCount: number = 0;
 
   openStart() {
     this.openStartCount++;
@@ -304,6 +348,10 @@ class BasicTestApp {
   close() {
     this.closeCount++;
   }
+
+  backdropClicked() {
+    this.backdropClickedCount++;
+  }
 }
 
 @Component({
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index e725e01f5ce3..f429613ec4f4 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -293,6 +293,9 @@ export class MdSidenavLayout implements AfterContentInit {
   get start() { return this._start; }
   get end() { return this._end; }
 
+  /** Event emitted when the sidenav backdrop is clicked. */
+  @Output('backdrop-clicked') onBackdropClicked = new EventEmitter<void>();
+
   /** The sidenav at the start/end alignment, independent of direction. */
   private _start: MdSidenav;
   private _end: MdSidenav;
@@ -397,6 +400,11 @@ export class MdSidenavLayout implements AfterContentInit {
     this._setDrawersValid(true);
   }
 
+  _onBackdropClicked() {
+    this.onBackdropClicked.emit();
+    this._closeModalSidenav();
+  }
+
   _closeModalSidenav() {
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();