diff --git a/web-ui/src/app/components/navbar/navbar.component.html b/web-ui/src/app/components/navbar/navbar.component.html
index 387751c..cc1d5c5 100644
--- a/web-ui/src/app/components/navbar/navbar.component.html
+++ b/web-ui/src/app/components/navbar/navbar.component.html
@@ -1,3 +1,17 @@
-<p>
-  navbar works!
-</p>
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a routerLink="/" class="navbar-brand">
+        <img src="assets/logo.png" alt="Logo">
+      </a>
+      <a routerLink="/">
+        <span class="navbar-brand">XSN Block Explorer</span>
+      </a>
+    </div>
+    <ul class="nav navbar-nav">
+      <li *ngFor="let tab of tabs" [ngClass]="{ 'active': isSelected(tab.path) }">
+        <a routerLink="{{tab.path}}">{{tab.label | translate}}</a>
+      </li>
+    </ul>
+  </div>
+</nav>
diff --git a/web-ui/src/app/components/navbar/navbar.component.ts b/web-ui/src/app/components/navbar/navbar.component.ts
index 8e29f4e..ad7b58c 100644
--- a/web-ui/src/app/components/navbar/navbar.component.ts
+++ b/web-ui/src/app/components/navbar/navbar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavbarComponent implements OnInit {
 
-  constructor() { }
+  public tabs = [];
+
+  constructor(private location: Location) { }
 
   ngOnInit() {
   }
 
+  /* tabs */
+  isSelected(path: string): boolean {
+    if (!path.startsWith('/')) {
+      path = '/' + path;
+    }
+
+    return this.location.isCurrentPathEqualTo(path);
+  }
 }