diff --git a/frontend/app/app.js b/frontend/app/app.js
index 7e2b584..96dbf09 100644
--- a/frontend/app/app.js
+++ b/frontend/app/app.js
@@ -398,7 +398,10 @@ angular.module('SchoolsApp.directives', [])
     .directive('simpleNav', [function() {
         return {
             restrict: 'AE',
-            templateUrl: 'app/templates/simpleNav.html'
+            templateUrl: 'app/templates/simpleNav.html',
+            scope: {
+              'activeTab': '@'
+            }
         }
     }])
     .directive('search', [function() {
diff --git a/frontend/app/templates/about.html b/frontend/app/templates/about.html
index 5f8d1ac..7d0756e 100644
--- a/frontend/app/templates/about.html
+++ b/frontend/app/templates/about.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="about"></simple-nav>
 
 <div class="container">
 <h1>About Us</h1>
diff --git a/frontend/app/templates/map.html b/frontend/app/templates/map.html
index ed0d813..1a39aa9 100644
--- a/frontend/app/templates/map.html
+++ b/frontend/app/templates/map.html
@@ -1,4 +1,4 @@
-<simple-nav class="content-row" id="simple-nav"></simple-nav>
+<simple-nav class="content-row" id="simple-nav" active-tab="map"></simple-nav>
 
 <leaflet class="content-row" id="leaflet-map" legend="legend" defaults="defaults" center="durham" maxbounds="durham.maxbounds" event-broadcast="events" geojson="geojson" markers="markers" tiles="tiles"></leaflet>
 
diff --git a/frontend/app/templates/navigating.html b/frontend/app/templates/navigating.html
index 0a564c8..a1d5819 100644
--- a/frontend/app/templates/navigating.html
+++ b/frontend/app/templates/navigating.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="guide"></simple-nav>
 
 <div class="container">
 <h1><center>My Public School Choices</center></h1>
diff --git a/frontend/app/templates/schools.html b/frontend/app/templates/schools.html
index aa0eec0..e16d38b 100644
--- a/frontend/app/templates/schools.html
+++ b/frontend/app/templates/schools.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="schools"></simple-nav>
 
 <div class="container">
     <div class="row">
diff --git a/frontend/app/templates/simpleNav.html b/frontend/app/templates/simpleNav.html
index 57a7516..6fea0fe 100644
--- a/frontend/app/templates/simpleNav.html
+++ b/frontend/app/templates/simpleNav.html
@@ -17,10 +17,10 @@ <h1 class='name'>Durham School Navigator <small><span class="label label-info">A
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="#/">Map</a></li>
-        <li><a href="#about">About</a></li>
-        <li><a href="#navigating">School Guide</a></li>
-        <li><a href="#schools">Schools</a></li>
+        <li ng-class="{active: activeTab == 'map'}"><a href="#/">Map</a></li>
+        <li ng-class="{active: activeTab == 'about'}"><a href="#about">About</a></li>
+        <li ng-class="{active: activeTab == 'guide'}"><a href="#navigating">School Guide</a></li>
+        <li ng-class="{active: activeTab == 'schools'}"><a href="#schools">Schools</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->