diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
new file mode 100644
index 00000000000..31798b14710
--- /dev/null
+++ b/public/app/core/components/navbar/navbar.html
@@ -0,0 +1,27 @@
+<div class="navbar navbar-static-top">
+	<div class="navbar-inner"><div class="container-fluid">
+			<div class="top-nav">
+				<div class="top-nav-btn top-nav-menu-btn">
+					<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
+						<span class="top-nav-logo-background">
+							<img class="logo-icon" src="img/fav32.png"></img>
+						</span>
+						<i class="fa fa-caret-down"></i>
+					</a>
+				</div>
+
+				<span class="icon-circle top-nav-icon">
+					<i ng-class="icon"></i>
+				</span>
+
+				<a ng-href="{{titleUrl}}" class="top-nav-title">
+					{{ctrl.title}}
+				</a>
+				<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
+			</div>
+
+			<div ng-transclude></div>
+		</div>
+	</div>
+</div>
+
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts
new file mode 100644
index 00000000000..83beb251e11
--- /dev/null
+++ b/public/app/core/components/navbar/navbar.ts
@@ -0,0 +1,36 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from '../../core_module';
+
+export class NavbarCtrl {
+  contextSrv: any;
+
+  /** @ngInject */
+  constructor(private $scope, contextSrv) {
+    this.contextSrv = contextSrv;
+  }
+}
+
+export function navbarDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'app/core/components/navbar/navbar.html',
+    controller: NavbarCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    transclude: true,
+    scope: {
+      title: "@",
+      titleUrl: "@",
+    },
+    link: function(scope, elem, attrs) {
+      scope.icon = attrs.icon;
+      scope.subnav = attrs.subnav;
+    }
+  };
+}
+
+coreModule.directive('navbar', navbarDirective);
diff --git a/public/app/features/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
similarity index 100%
rename from public/app/features/sidemenu/sidemenu.html
rename to public/app/core/components/sidemenu/sidemenu.html
diff --git a/public/app/features/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts
similarity index 93%
rename from public/app/features/sidemenu/sidemenu.ts
rename to public/app/core/components/sidemenu/sidemenu.ts
index 520bd2f864a..70410299db2 100644
--- a/public/app/features/sidemenu/sidemenu.ts
+++ b/public/app/core/components/sidemenu/sidemenu.ts
@@ -1,12 +1,11 @@
-///<reference path="../../headers/common.d.ts" />
+///<reference path="../../../headers/common.d.ts" />
 
 import config from 'app/core/config';
-import store from 'app/core/store';
 import _ from 'lodash';
-import angular from 'angular';
 import $ from 'jquery';
+import coreModule from '../../core_module';
 
-class SideMenuCtrl {
+export class SideMenuCtrl {
   isSignedIn: boolean;
   showSignout: boolean;
   user: any;
@@ -135,7 +134,7 @@ class SideMenuCtrl {
  };
 }
 
-function sideMenuDirective() {
+export function sideMenuDirective() {
   return {
     restrict: 'E',
     templateUrl: 'app/features/sidemenu/sidemenu.html',
@@ -146,4 +145,4 @@ function sideMenuDirective() {
   };
 }
 
-angular.module('grafana.directives').directive('sidemenu', sideMenuDirective);
+coreModule.directive('sidemenu', sideMenuDirective);
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 7728ddb7a93..84129fc99a7 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -22,6 +22,8 @@ import './jquery_extended';
 import './partials';
 
 import {grafanaAppDirective} from './components/grafana_app';
+import {sideMenuDirective} from './components/sidemenu/sidemenu';
+import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
@@ -29,4 +31,4 @@ import 'app/core/routes/all';
 import './filters/filters';
 import coreModule from './core_module';
 
-export {arrayJoin, coreModule, grafanaAppDirective};
+export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective};
diff --git a/public/app/features/all.js b/public/app/features/all.js
index e3c9f92b531..d4436c9deaa 100644
--- a/public/app/features/all.js
+++ b/public/app/features/all.js
@@ -1,6 +1,5 @@
 define([
   './panellinks/module',
-  './sidemenu/sidemenu',
   './dashlinks/module',
   './annotations/annotations_srv',
   './templating/templateSrv',
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index bc011013032..2aad080f348 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -1,9 +1,15 @@
-<topnav icon="fa fa-fw fa-list" title="Playlists" title-url="playlists" subnav="true">
+<!-- <topnav icon="fa fa&#45;fw fa&#45;list" title="Playlists" title&#45;url="playlists" subnav="true"> -->
+<!-- 	<ul class="nav"> -->
+<!-- 		<li ng&#45;class="{active: isNew()}" ng&#45;show="isNew()"><a href="datasources/create">New</a></li> -->
+<!-- 		<li class="active" ng&#45;show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li> -->
+<!-- 	</ul> -->
+<!-- </topnav> -->
+<navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
 	<ul class="nav">
 		<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
 		<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container" ng-form="playlistEditForm">
   <div class="page">