diff --git a/wherehows-web/app/components/nav-link.js b/wherehows-web/app/components/nav-link.js
new file mode 100644
index 0000000000..f1a3819030
--- /dev/null
+++ b/wherehows-web/app/components/nav-link.js
@@ -0,0 +1,20 @@
+import Ember from 'ember';
+
+export default Ember.LinkComponent.extend({
+  tagName: 'li',
+
+  attributeBindings: ['data-toggle', 'data-target'],
+
+  hrefForA: Ember.computed('models', 'qualifiedRouteName', function () {
+    let qualifiedRouteName = this.get('qualifiedRouteName');
+    let models = this.get('models');
+
+    if (this.get('loading')) {
+      return this.get('loadingHref');
+    }
+
+    let routing = this.get('_routing');
+    let queryParams = this.get('queryParams.values');
+    return routing.generateURL(qualifiedRouteName, models, queryParams);
+  })
+});
diff --git a/wherehows-web/app/templates/components/nav-link.hbs b/wherehows-web/app/templates/components/nav-link.hbs
new file mode 100644
index 0000000000..61209dfaa2
--- /dev/null
+++ b/wherehows-web/app/templates/components/nav-link.hbs
@@ -0,0 +1 @@
+<a href="{{hrefForA}}">{{yield}}</a>
\ No newline at end of file