diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 9bf1e7bcb62..e2030e8a049 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -115,6 +115,65 @@ a.navbar-brand:hover {
   outline: 0;
 }
 
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.dropdown-submenu a:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top:0;
+  left:100%;
+  margin-top:-6px;
+  margin-left:-1px;
+  -webkit-border-radius:0 6px 6px 6px;
+  -moz-border-radius:0 6px 6px 6px;
+  border-radius:0 6px 6px 6px;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+    display:block;
+}
+.dropdown-submenu > a:after {
+  display:block;
+  content:" ";
+  float:right;
+  width:0;
+  height:0;
+  border-color:transparent;
+  border-style:solid;
+  border-width:5px 0 5px 5px;
+  border-left-color:#cccccc;
+  margin-top:5px;
+  margin-right:-10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color:#ffffff;
+}
+.dropdown-submenu.pull-left {
+  float:none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left:-100%;
+  margin-left:10px;
+  -webkit-border-radius:6px 0 6px 6px;
+  -moz-border-radius:6px 0 6px 6px;
+  border-radius:6px 0 6px 6px;
+}
+
+
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #D3D3D3;
@@ -148,7 +207,6 @@ a.navbar-brand:hover {
   }
 }
 
-
 #main {
   padding-left: 10px;
   padding-right: 10px;
@@ -159,6 +217,7 @@ a.navbar-brand:hover {
 #notebook-list {
   position: relative;
   overflow: hidden;
+  display: inline;
 }
 
 @media (min-width: 768px) {
diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
index 9e7963c7dbd..7bf89040e79 100644
--- a/zeppelin-web/src/app/home/home.html
+++ b/zeppelin-web/src/app/home/home.html
@@ -30,8 +30,7 @@ <h4>Notebook</h4>
           <h5><a href="javascript:void(0);" ng-click="home.websocketMsgSrv.createNotebook()" style="text-decoration: none;">
               <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
           <ul style="list-style-type: none;">
-            <li ng-repeat="note in home.notes.list track by $index"><i style="font-size: 10px;" class="icon-doc"></i>
-              <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
+            <li ng-repeat="note in home.notes.list track by $index" ng-include="'notebook_list_renderer.html'">
             </li>
           </ul>
         </div>
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index e5830987e0a..305f06ee8e4 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -10,7 +10,19 @@
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
--->
+  -->
+<script type="text/ng-template" id="notebook_list_renderer.html">
+  <a ng-if="note.id" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
+  <li ng-if="!note.id"
+      class="dropdown-submenu">
+    <a tabindex="-1" href="#">{{note.name}}</a>
+    <ul class="dropdown-menu">
+      <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
+    </ul>
+  </li>
+</script>
+
+
 <div class="navbar navbar-inverse navbar-fixed-top" style="display: none;" role="navigation" ng-class="{'displayNavBar': !asIframe}">
   <div class="container">
     <div class="navbar-header">
@@ -32,8 +44,7 @@
             <li><a href="javascript:void(0);" ng-click="navbar.websocketMsgSrv.createNotebook()"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
-              <li ng-repeat="note in navbar.notes.list track by $index" ng-class="{'active' : navbar.isActive(note.id)}">
-                <a href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
+              <li ng-repeat="note in navbar.notes.list track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
               </li>
             </div>
           </ul>
diff --git a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
index ae48999b86d..1385794c9c6 100644
--- a/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
+++ b/zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js
@@ -19,8 +19,35 @@ angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
   notes.list = [];
 
   notes.setNotes = function(notesList) {
-    notes.list = angular.copy(notesList);
+    notes.list = [];
+
+    for (var i in notesList) {
+      var note = notesList[i];
+      var noteName = note.name || note.id;
+      var dirs = noteName.match(/([^\\\][^\/]|\\\/)+/g);
+
+      var curDir = notes.list;
+      for (var t = 0; t < dirs.length; t++) {
+        var dir = dirs[t];
+        if (t == dirs.length - 1) { // last item
+          curDir.push({
+            name : dir,
+            id : note.id
+          });
+        } else {
+          var child = {
+            name : dir,
+            children : []
+          };
+          curDir.push(child);
+          curDir = child.children;
+        }
+      }
+    }
+
+    // TODO sort
+    console.log("notes.list=%o", notes.list);
   };
 
   return notes;
-});
\ No newline at end of file
+});
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 36aa9335398..7d61f868b59 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -101,7 +101,7 @@
     <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
     <script src="bower_components/highlightjs/highlight.pack.js"></script>
     <script src="bower_components/lodash/lodash.js"></script>
-    <script src="bower_components/angular-filter/dist/angular-filter.js"></script>
+    <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->