diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
new file mode 100644
index 0000000..3d2f646
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Navigation (layout) -- CSS file
+ */
+
+#nav {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    padding: 0;
+    z-index: 3000;
+    visibility: hidden;
+}
+
+html[data-platform='iPad'] #nav {
+    top: 60px;
+}
+
+#nav .nav-hdr {
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 12pt;
+    padding: 8px 15px;
+}
+
+#nav a {
+    text-decoration: none;
+    font-size: 12pt;
+    font-weight: lighter;
+    display: block;
+    padding: 6px 10px;
+    margin: 0 7px;
+}
+
+#nav a div {
+    display: inline-block;
+    vertical-align: middle;
+    padding-right: 4px;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
new file mode 100644
index 0000000..a612214
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
@@ -0,0 +1,10 @@
+<nav id="nav" [@navState]="ns.showNav?'active':'inactive'">
+    <div class="nav-hdr">Platform</div>
+    <a (click)="ns.hideNav()" routerLink="/apps" routerLinkActive="active">
+        <!--<div onosIcon iconId="nav_apps"></div>
+         Using the new IconComponent rather than the directive -->
+        <onos-icon iconId="nav_apps"></onos-icon>Apps</a>
+    <div class="nav-hdr">Network</div>
+    <a (click)="ns.hideNav()" routerLink="/devices" routerLinkActive="active">
+        <onos-icon iconId="nav_devs"></onos-icon>Devices</a>
+</nav>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
new file mode 100644
index 0000000..27ae8de
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+import { Component, OnInit } from '@angular/core';
+import { LogService } from '../../../log.service';
+import { NavService } from '../nav.service';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+/**
+ * ONOS GUI -- Navigation Module
+ */
+@Component({
+  selector: 'onos-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.theme.css', './nav.component.css'],
+  animations: [
+    trigger('navState', [
+      state('inactive', style({
+        visibility: 'hidden',
+        transform: 'translateX(-100%)'
+      })),
+      state('active', style({
+        visibility: 'visible',
+        transform: 'translateX(0%)'
+      })),
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out'))
+    ])
+  ]
+})
+export class NavComponent implements OnInit {
+
+  constructor(
+    private log: LogService,
+    public ns: NavService
+  ) {
+    this.log.debug('NavComponent constructed');
+  }
+
+  ngOnInit() {
+    this.log.debug('NavComponent initialized');
+  }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css
new file mode 100644
index 0000000..1a308ac
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.theme.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Navigation (theme) -- CSS file
+ */
+
+#nav {
+    background-color: #231f20;
+}
+
+#nav .nav-hdr {
+    color: #716b6a;
+    background-color: #3c3a3a;
+}
+
+#nav a {
+    color: #c7c7c0;
+    border-bottom: solid #3c3a3a 1px;
+}
+
+#nav a:hover {
+    color: #ffffff;
+}
+
+/* With component styles isolation in Angular 6 these no longer work */
+#nav a div svg.embeddedIcon g.icon .glyph {
+    fill: #007dc4;
+}
+
+#nav a:hover div svg.embeddedIcon g.icon .glyph {
+    fill: #20b2ff;
+}