diff --git a/ignite-html-router.js b/ignite-html-router.js
index dd41d6d..97fbdae 100644
--- a/ignite-html-router.js
+++ b/ignite-html-router.js
@@ -1,6 +1,6 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";
-import { IgniteCallback} from "../ignite-html/ignite-html.js";
+import { IgniteCallback, IgniteProperty} from "../ignite-html/ignite-html.js";
 
 /**
  * Creates a route listener that runs when a route is switched. The listener will run on construct the first time and update the state.
@@ -81,6 +81,23 @@ IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallb
     return this;
 };
 
+/**
+ * 
+ * @param {String|IgniteProperty|Function} route The route to navigate to. 
+ * @param {Any|IgniteProperty|Function} data The data to pass along with this navigate, this only applies when not refreshing, default is null.
+ * @param {Boolean|IgniteProperty|Function} refresh Whether or not to refresh the page, default is false.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.navigate = function(route, data = null, refresh = false) {
+    return this.onClick(() => {
+        Router.navigate(
+            (route instanceof IgniteProperty ? route.value : (route instanceof Function ? route() : route)),
+            (data instanceof IgniteProperty ? data.value : (data instanceof Function ? data() : data)),
+            (refresh instanceof IgniteProperty ? refresh.value : (refresh instanceof Function ? refresh() : refresh))
+        );
+    });
+}
+
 class RouterLink extends IgniteElement {
     constructor() {
         super();