diff --git a/docs/TODO.md b/docs/TODO.md
index 1c8a52e..e5122a6 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -8,4 +8,4 @@
 - [ ] scaffold design patterns/examples area
 - [ ] mobile side navbar
 - [ ] build pipeline for examples, create example component, possibly with code editing
-- [ ] add active state to Docs side bar. (currently doesn't show which tab is active/selected)
+- [x] add active state to Docs side bar. (currently doesn't show which tab is active/selected)
diff --git a/docs/sass/main.scss b/docs/sass/main.scss
index 5b681b9..cb5a184 100644
--- a/docs/sass/main.scss
+++ b/docs/sass/main.scss
@@ -255,7 +255,12 @@ pre code.hljs {
 .sidebar-links {
   &--item {
     line-height: 1.2em;
+    margin-top: 1em;
     margin-bottom: 1em;
   }
+  &--item-active {
+    background-color: #E8E4E4;
+    padding: 1em;
+  }
 }
 
diff --git a/docs/src/main.js b/docs/src/main.js
index cc07d0e..53e451e 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -6,9 +6,24 @@ addScrollClass("scrolled")
 
 render(ItemFilterExample, 'item-filter-example')
 
+updateSideBar()
+
 function render(component, id) {
   var el = document.getElementById(id)
   if (el) {
     React.render(React.createElement(ItemFilterExample), el)
   }
 }
+
+function updateSideBar() {
+  var sideBarElements = document.getElementsByClassName('sidebar-links--item')
+  for (var i in sideBarElements) {
+    if (sideBarElements[i].firstChild) {
+      if (window.location.href === sideBarElements[i].firstChild.href) {
+        sideBarElements[i].className = 'sidebar-links--item-active'
+      } else {
+        sideBarElements[i].className = 'sidebar-links--item'
+      }
+    }
+  }
+}