diff --git a/public/api/uxp-nav.json b/public/api/uxp-nav.json
index 69197c5..2b2c09c 100644
--- a/public/api/uxp-nav.json
+++ b/public/api/uxp-nav.json
@@ -23,7 +23,7 @@
     },
     {
       "uid": "menu-demo-id",
-      "label": "Menu Demo",
+      "label": "Page Name Demo",
       "path": "/demos",
       "hasChild": "true",
       "multiColumn": "false",
@@ -32,14 +32,14 @@
       "children": [
         {
           "uid": "menu-demo-one-id",
-          "label": "Submenu System",
-          "path": "/",
+          "label": "Introduction",
+          "path": "/demos/name/introduction",
           "hasChild": "false"
         },
         {
           "uid": "menu-demo-two-id",
-          "label": "Menu Subsystem",
-          "path": "/",
+          "label": "Conclusion",
+          "path": "/demos/name/conclusion",
           "hasChild": "false"
         }
       ]
diff --git a/src/Demos/_routes/demos.routes.js b/src/Demos/_routes/demos.routes.js
index 05f7427..f4057d3 100644
--- a/src/Demos/_routes/demos.routes.js
+++ b/src/Demos/_routes/demos.routes.js
@@ -33,5 +33,10 @@ export const demosRoutes = [
   {
     path: '/demos/today',
     component: () => import('@/Demos/_views/today/Today.vue')
+  },
+  {
+    path: '/demos/name/:id',
+    component: () => import('@/Demos/_views/Name.vue'),
+    props: true
   }
 ]
\ No newline at end of file
diff --git a/src/Demos/_views/Name.vue b/src/Demos/_views/Name.vue
index e9611ce..93391e8 100644
--- a/src/Demos/_views/Name.vue
+++ b/src/Demos/_views/Name.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import baseHeader from '@/_partials/BaseHeader.vue';
@@ -40,7 +40,9 @@ export default {
     
     const route = useRoute();
 
-    const pageName = route.params.id;
+    const pageName = ref(route.params.id);
+
+    watch( () => route.params.id, _newId => pageName.value = _newId );
 
     return {
       pageName
diff --git a/src/_components/global-nav/global-nav.vue b/src/_components/global-nav/global-nav.vue
index c69cf98..bf7472a 100644
--- a/src/_components/global-nav/global-nav.vue
+++ b/src/_components/global-nav/global-nav.vue
@@ -6,17 +6,17 @@
           <li v-for="item in navData.main" :key="item.uid" :data-control-id="item.uid" :class="'fsa-nav-global__list-item '+ item.columnClass">
             <!-- Multicolumn with Headers-->
             <div v-if="item.hasChild=='true' && item.multiColumn=='true' && item.hasHeaders=='true'">
-              <button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
+              <button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
                 <span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
               </button>
               <div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
                 <div class="fsa-nav-global__sub-menu-bd" :aria-labelledby="item.uid+'-SUB'">
-                  <div v-for="child in item.children" :key="child.id" class="fsa-nav-global__sub-menu-group">
+                  <div v-for="child in item.children" :key="child.uid" class="fsa-nav-global__sub-menu-group">
                     <h3 class="fsa-nav-global__sub-menu-title" :id="child.uid">{{ child.header }}</h3>
                     <ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="child.uid">
                       <li v-for="gp in child.group" :key="gp.uid" class="fsa-nav-global__sub-menu-item">
                       
-                        <a href="#" @click.prevent="goto(gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
+                        <a :href="basePath + gp.path" @click.prevent="navigateTo(item.uid+'-BTN', gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
 
                       </li>
                     </ul>
@@ -26,7 +26,7 @@
             </div>
             <!-- Multicolumn No Headers -->
             <div v-else-if="item.hasChild=='true' && item.multiColumn=='true' && item.hasHeaders=='false'">
-              <button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
+              <button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
                 <span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
               </button>
               <div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
@@ -34,7 +34,7 @@
                   <ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="item.uid+'-SUB'">
                     <li v-for="child in item.children" :key="child.uid" class="fsa-nav-global__sub-menu-item">
                       
-                      <a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
+                      <a :href="basePath + child.path" @click.prevent="navigateTo(item.uid+'-BTN', child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
 
                     </li>
                   </ul>
@@ -45,7 +45,7 @@
 
             <div v-else-if="item.hasChild=='true' && item.multiColumn=='false' && item.hasHeaders=='true'">
 
-              <button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
+              <button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
                 <span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
               </button>
 
@@ -55,7 +55,7 @@
                   <h3 class="fsa-nav-global__sub-menu-title" :id="child.uid">{{ child.header }}</h3>
                   <ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="child.uid">
                     <li v-for="gp in child.group" :key="gp.uid" class="fsa-nav-global__sub-menu-item">
-                      <a href="#" @click.prevent="goto(gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
+                      <a :href="basePath + gp.path" @click.prevent="navigateTo(item.uid+'-BTN', gp.path)" class="fsa-nav-global__sub-menu-link">{{ gp.label }}</a>
                     </li>
                   </ul>
                 </div>
@@ -64,7 +64,7 @@
 
             <!-- Single Column No Headers -->
             <div v-else-if="item.hasChild=='true' && item.multiColumn=='false' && item.hasHeaders=='false'">
-              <button :id="item.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
+              <button :id="item.uid+'-BTN'" @click="toggleMenu(item.uid+'-BTN')" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="item.uid">
                 <span class="fsa-nav-global__text" :id="item.uid+'-SUB'">{{item.label}}</span>
               </button>
               <div class="fsa-nav-global__sub-menu" :id="item.uid" aria-hidden="true">
@@ -72,62 +72,28 @@
                   <ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="item.uid+'-SUB'">
                     <li v-for="child in item.children" :key="child.id" class="fsa-nav-global__sub-menu-item">
 
-                      <a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
+                      <a :href="basePath + child.path" @click.prevent="navigateTo(item.uid+'-BTN', child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
                       
                     </li>
                   </ul>
                 </div>
               </div>
             </div>
+            <div v-else="item.hasChild=='false'">
 
-            <div v-else>
-              <a href="#" @click.prevent="goto(item.path)" class="fsa-nav-global__link">
+              <a :href="basePath + item.path" @click.prevent="goto(item.path)" class="fsa-nav-global__link">
                 <span class="fsa-nav-global__text">{{item.label}}</span>
               </a>
-            </div>
 
+            </div>
           </li>
         </ul>
-        
         <div v-if="navData.side" class="fsa-nav-global__aside">
-          <div class="fsa-level">
-
-            <div v-for="sideItem in navData.side" :data-control-id="sideItem.uid" :key="sideItem.uid">
-                <button v-if="sideItem.hasChild=='true'" :id="sideItem.uid+'-BTN'" @click="toggleMenu" class="fsa-nav-global__link fsa-nav-global__link--has-sub-menu" type="button" aria-expanded="false" :aria-controls="sideItem.uid">
-                  <span class="fsa-nav-global__text" :id="sideItem.uid+'-SUB'">{{sideItem.label}}</span>
-                </button>
-                <div v-if="sideItem.hasChild=='true'" class="fsa-nav-global__sub-menu" :id="sideItem.uid" aria-hidden="true">
-                  <div class="fsa-nav-global__sub-menu-bd">
-                    <ul class="fsa-nav-global__sub-menu-list" :aria-labelledby="sideItem.uid+'-SUB'">
-                      <li v-for="child in sideItem.children" :key="child.id" class="fsa-nav-global__sub-menu-item">
-
-                        <a href="#" @click.prevent="goto(child.path)" class="fsa-nav-global__sub-menu-link">{{ child.label }}</a>
-                        
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-
-                <a v-if="sideItem.hasChild=='false'" href="#" @click.prevent="goto(sideItem.path)">
-                  <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
-                    <svg v-if="sideItem.icon"
-                      :class="sideItem.icon.class" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 
-                      <path :d="sideItem.icon.path"></path>
-                    </svg>
-                    <span>{{sideItem.label}}</span>
-                  </span>
-                </a>
-
-            </div>
-          </div>
-        </div>
-
-
-        <div v-if="false" class="fsa-nav-global__aside">
           <div class="fsa-level">
             <span v-for="sideItem in navData.side" :key="sideItem.uid">
               
-              <a href="#" @click.prevent="goto(sideItem.path)">
+              <a :href="basePath + sideItem.path" @click.prevent="goto(sideItem.path)">
+
                 <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
                   <svg v-if="sideItem.icon"
                     :class="sideItem.icon.class" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 
@@ -135,12 +101,11 @@
                   </svg>
                   <span>{{sideItem.label}}</span>
                 </span>
+                
               </a>
-
             </span>
           </div>
         </div>
-
         <div v-if="USE_SEARCH == 'true'" class="fsa-nav-global__search">
           <div class="fsa-search fsa-search--small" role="search">
             <div class="fsa-search__bd">
@@ -206,6 +171,9 @@ export default {
       documentClickHandler
     } = useMenuSystem();
     const { goto } = useNavigation();
+
+    let baseUrl = import.meta.env.BASE_URL.substring(0, import.meta.env.BASE_URL.length - 1)
+    const basePath = ref( baseUrl );
     
     const navData = ref({});
     const navigationData = computed( () => props.NAV_DATA );
@@ -222,9 +190,9 @@ export default {
       navData.value = replaceUID( val );
     })
 
-    function toggleMenu(e) {
-      let theItem = e.currentTarget;
-      let theMenu = e.currentTarget.nextSibling;
+    function toggleMenu(_id) {
+      let theItem = document.getElementById(_id);
+      let theMenu = theItem.nextSibling;
 
       let expanded = theItem.getAttribute('aria-expanded');
       loopItems('closeAllMenus');
@@ -246,6 +214,10 @@ export default {
       emit("emitSearch", {type: 'scoped', scope: cat, phrase: p})
     }
 
+    const navigateTo = (_id, _path) => {
+      toggleMenu(_id)
+      goto(_path);
+    }
     
 
     onMounted(() => {
@@ -262,7 +234,9 @@ export default {
     
     return {
       navData,
+      navigateTo,
       goto,
+      basePath,
       openMenu,
       closeMenu,
       loopItems,