diff --git a/packages/ui/src/lib/utility/tabs/tabs.component.ts b/packages/ui/src/lib/utility/tabs/tabs.component.ts
index 68e05bf98..26e59b431 100644
--- a/packages/ui/src/lib/utility/tabs/tabs.component.ts
+++ b/packages/ui/src/lib/utility/tabs/tabs.component.ts
@@ -28,7 +28,7 @@ export class TabsComponent implements AfterContentInit {
     if (!url || !this.tabs) {
       return;
     }
-    const paths = url.split('/');
+    const paths = new URL(url, window.location.origin).pathname.split('/');
     const match = this.tabs.find((tab) => paths[paths.length - 1].indexOf(tab.route) !== -1);
     if (match) {
       this.select(match, true);
diff --git a/src/app/demo.routes.ts b/src/app/demo.routes.ts
index 7c6dea193..683756397 100644
--- a/src/app/demo.routes.ts
+++ b/src/app/demo.routes.ts
@@ -178,11 +178,32 @@ export const demoRoutes: Routes = [
       },
       {
         path: 'tabs',
-        component: TabsDemoComponent,
-        data: {
-          paths: ['tabs/tabs-demo.component.html', 'tabs/tabs-demo.component.ts'],
-          links: ['components/TabsComponent.html#readme', 'modules/UtilityModule.html'] // TODO: enhance readme
-        }
+        children: [
+          {
+            path: '',
+            component: TabsDemoComponent,
+            data: {
+              paths: ['tabs/tabs-demo.component.html', 'tabs/tabs-demo.component.ts'],
+              links: ['components/TabsComponent.html#readme', 'modules/UtilityModule.html'] // TODO: enhance readme
+            }
+          },
+          {
+            path: 'foo',
+            component: TabsDemoComponent,
+            data: {
+              paths: ['tabs/tabs-demo.component.html', 'tabs/tabs-demo.component.ts'],
+              links: ['components/TabsComponent.html#readme', 'modules/UtilityModule.html'] // TODO: enhance readme
+            }
+          },
+          {
+            path: 'bar',
+            component: TabsDemoComponent,
+            data: {
+              paths: ['tabs/tabs-demo.component.html', 'tabs/tabs-demo.component.ts'],
+              links: ['components/TabsComponent.html#readme', 'modules/UtilityModule.html'] // TODO: enhance readme
+            }
+          },
+        ]
       },
       {
         path: 'login-form',
diff --git a/src/app/tabs/tabs-demo.component.html b/src/app/tabs/tabs-demo.component.html
index 8fa083db0..720c6ef5d 100644
--- a/src/app/tabs/tabs-demo.component.html
+++ b/src/app/tabs/tabs-demo.component.html
@@ -1,6 +1,6 @@
 <h2>Tabs</h2>
 
-<ec-tabs>
+<ec-tabs> 
   <ec-tab label="Bench">
     <img src="https://unsplash.it/300/400">
   </ec-tab>
@@ -13,4 +13,10 @@ <h2>Tabs</h2>
   <ec-tab label="Desert">
     <img src="https://unsplash.it/200/100">
   </ec-tab>
+  <ec-tab label="foo" route="foo">
+    <img src="https://unsplash.it/200/100">
+  </ec-tab>
+  <ec-tab label="bar" route="bar">
+    <img src="https://unsplash.it/200/100">
+  </ec-tab>
 </ec-tabs>
\ No newline at end of file