diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index ee3a5ef3..263cf4ba 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -2,6 +2,7 @@
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 import useMockComponents from './_mock-components.js'
 import { setup, type Preview } from '@storybook/vue3'
+import { createRouter, createWebHashHistory, type RouterOptions } from 'vue-router'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
@@ -13,9 +14,28 @@ import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 
 const pinia = createPinia()
-
+const router = createRouter({
+  routes: [],
+  history: createWebHashHistory(),
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return {
+        top: 0
+      }
+    }
+  }
+} as RouterOptions)
 setup((app, _context) => {
   app.use(pinia)
+  app.use(router)
   app.use(vClickOutside)
   app.use(VueCompareImage)
   app.component('Swiper', Swiper)
@@ -122,7 +142,8 @@ const preview: Preview = {
             ['Overview', 'WWW'],
             'Footers',
             ['Overview', 'WWW'],
-            'Secondary Navigation'
+            'Secondary Navigation',
+            'Jump Menu'
           ],
           'Global Layout',
           [
@@ -149,7 +170,7 @@ const preview: Preview = {
             'Cards',
             ['Overview', 'BlockLinkCard', 'BlockLinkTile', 'BlockCircleImageCard'],
             'Blocks',
-            ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
+            ['BlockStreamfield'],
             'Heroes',
             ['Overview', 'Small', 'Medium', 'Large', 'Media Only', 'HeroListingIndex'],
             'Forms',
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index ac978843..4db6b08a 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -41,6 +41,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "click-outside-vue3": "^4.0.1",
     "dayjs": "^1.11.11",
+    "mitt": "^3.0.1",
     "swiper": "^11.1.3",
     "vue": "^3.2.47",
     "vue3-compare-image": "^1.2.5"
diff --git a/packages/common/src/scss/components/_BlockKeyPoints.scss b/packages/common/src/scss/components/_BlockKeyPoints.scss
index 3e8e8c0f..c41d0f7b 100644
--- a/packages/common/src/scss/components/_BlockKeyPoints.scss
+++ b/packages/common/src/scss/components/_BlockKeyPoints.scss
@@ -1,7 +1,7 @@
 .BlockKeyPoints {
   ul li {
     &::before {
-      @apply bg-jpl-red;
+      @apply bg-primary;
       @apply inline-block;
       @apply relative;
       @apply mr-4;
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bf2ed757..17482fb5 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -32,6 +32,7 @@
     "dayjs": "^1.11.11",
     "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "sass": "^1.77.4",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.vue b/packages/vue/src/components/BaseAudio/BaseAudio.vue
index 82f15bf6..0b280001 100644
--- a/packages/vue/src/components/BaseAudio/BaseAudio.vue
+++ b/packages/vue/src/components/BaseAudio/BaseAudio.vue
@@ -119,6 +119,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+// import { eventBus } from './../../utils/eventBus'
 import IconPlay from './../Icons/IconPlay.vue'
 import IconPause from './../Icons/IconPause.vue'
 import IconVolume from './../Icons/IconVolume.vue'
@@ -326,10 +327,8 @@ export default defineComponent({
         this.audio.addEventListener('play', this._handlePlayPause)
         this.audio.addEventListener('ended', this._handleEnded)
       }
-      // TODO: VUE3: find solution for emitting event from slot
-      // TODO: find a cleaner way to do this w/o using mounted or root level events
-      // scoped slots? https://github.com/vuejs/vue/issues/4332
-      // this.$root?.$on('play', this.pauseOthers)
+      // TODO: VUE3: pass uuID to pauseOthers() method
+      // eventBus.on('play', () => this.pauseOthers())
     },
     getAudio() {
       return this.$el.querySelectorAll('audio')[0]
diff --git a/packages/vue/src/components/BaseLink/BaseLink.vue b/packages/vue/src/components/BaseLink/BaseLink.vue
index 67892854..74c2b37e 100644
--- a/packages/vue/src/components/BaseLink/BaseLink.vue
+++ b/packages/vue/src/components/BaseLink/BaseLink.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
@@ -145,6 +146,7 @@ export default defineComponent({
     clickEvent() {
       this.$root?.$emit('linkClicked')
       this.$emit('specificLinkClicked')
+      eventBus.emit('linkClicked')
     }
   }
 })
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.vue b/packages/vue/src/components/BlockHeading/BlockHeading.vue
index fe3dfb45..c583a639 100644
--- a/packages/vue/src/components/BlockHeading/BlockHeading.vue
+++ b/packages/vue/src/components/BlockHeading/BlockHeading.vue
@@ -1,7 +1,10 @@
 <template>
   <BaseHeading
     v-if="data"
+    :id="getId"
     :level="data.level"
+    class="BlockHeading"
+    :class="{ 'has-anchor': generateId }"
   >
     {{ data.heading }}
   </BaseHeading>
@@ -9,6 +12,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { getHeadingId } from '../../utils/getHeadingId'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -20,7 +24,31 @@ export default defineComponent({
     data: {
       type: Object,
       required: false
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    generateId: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getId() {
+      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
     }
   }
 })
 </script>
+<style lang="scss">
+.BlockHeading {
+  &:target {
+    @apply scroll-mt-14;
+    @screen lg {
+      @apply scroll-mt-20;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 4fda137a..4720733f 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -11,7 +11,11 @@
         indent="col-3"
         class="mb-5"
       >
-        <BlockHeading :data="block" />
+        <BlockHeading
+          :data="block"
+          :index="index"
+          generate-id
+        />
       </LayoutHelper>
 
       <!-- custom margin bottom that matches BlockText styles if followed by InlineImageBlock -->
diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
index 4c6516a5..76bda750 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
+++ b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
@@ -80,10 +81,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    // TODO: VUE3: find solution for emitting event from slot
-    // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeDropdown)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {
diff --git a/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
index 479feadd..19ac6492 100644
--- a/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
+++ b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="NavDropdownToggle group cursor-pointer"
-    :class="{ '-active': isActivePath }"
+    :class="{ '-active': isActivePath, '-invert': invert }"
     :aria-expanded="ariaExpanded"
     @click="clickEvent()"
     @keydown.esc="escEvent()"
@@ -26,13 +26,18 @@ export default defineComponent({
   props: {
     path: {
       type: String,
-      required: false
+      default: undefined
     },
     ariaExpanded: {
       type: Boolean,
-      required: false
+      default: false
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'toggleClicked'],
   computed: {
     isActivePath() {
       if (this.path) {
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
new file mode 100644
index 00000000..98c836cf
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
@@ -0,0 +1,47 @@
+import NavJumpMenu from './NavJumpMenu.vue'
+
+export default {
+  title: 'Navigation/Jump Menu',
+  component: NavJumpMenu,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+const JumpLinksData = [
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  }
+]
+export const BaseStory = {
+  name: 'Jump Menu',
+  args: {
+    title: 'Page Title',
+    jumpLinks: JumpLinksData,
+    invert: true
+  }
+}
+
+export const Light = {
+  args: {
+    title: 'Page Title',
+    jumpLinks: JumpLinksData,
+    invert: false
+  }
+}
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
new file mode 100644
index 00000000..abb51dfc
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -0,0 +1,141 @@
+<template>
+  <NavSecondary
+    v-if="enabled"
+    id="JumpMenuTop"
+    ref="NavJumpMenuRef"
+    class="NavJumpMenu -hide-until-threshold"
+    :invert="invert"
+  >
+    <template v-for="(item, index) in theBreadcrumbs">
+      <template v-if="item.children && item.children.length > 0">
+        <NavSecondaryDropdown
+          :key="index"
+          :item="item"
+          :index="index"
+          :is-last="theBreadcrumbs && index === theBreadcrumbs.length - 1"
+          :invert="invert"
+        >
+          <NavJumpMenuContent
+            :key="index"
+            :item="item"
+          />
+        </NavSecondaryDropdown>
+      </template>
+      <template v-else>
+        <NavSecondaryLink
+          :key="index"
+          :item="item"
+          :index="index"
+          :invert="invert"
+        />
+      </template>
+    </template>
+  </NavSecondary>
+</template>
+<script setup lang="ts">
+import { computed, defineExpose, ref, onMounted, watch } from 'vue'
+import { mixinUpdateSecondary } from './../../utils/mixins'
+import { useRoute } from 'vue-router'
+import NavSecondary from './../NavSecondary/NavSecondary.vue'
+import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
+import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
+import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
+import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
+import { getHeadingId } from '../../utils/getHeadingId'
+
+interface NavJumpMenuProps {
+  title?: string
+  jumpLinks?: BreadcrumbPathObject[]
+  blocks?: BlockData[]
+  headingLevel?: string
+  invert?: boolean
+  enabled?: boolean
+}
+
+const props = withDefaults(defineProps<NavJumpMenuProps>(), {
+  title: undefined,
+  jumpLinks: undefined,
+  blocks: undefined,
+  headingLevel: 'h2',
+  enabled: true,
+  invert: true,
+  hidden: false
+})
+
+const NavJumpMenuRef = ref()
+
+const theJumpLinks = computed(() => {
+  if (props.jumpLinks) {
+    return props.jumpLinks
+  } else if (props.blocks) {
+    const indexedBlocks = props.blocks.map((b, index) => {
+      return {
+        ...b,
+        index: index
+      }
+    })
+    const filteredBlocks = indexedBlocks.filter((b) => {
+      return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
+    })
+    // map to the correct data shape
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+      return {
+        // @ts-expect-error using parameter that was added to BlockData
+        path: '#' + getHeadingId(l.heading, l.index),
+        title: l.heading
+      } as BreadcrumbPathObject
+    })
+    return links
+  }
+  return []
+})
+
+const theBreadcrumbs = computed(() => {
+  let breadcrumb = undefined
+  const rootItem = props.title
+    ? {
+        title: props.title,
+        path: '#JumpMenuTop'
+      }
+    : {
+        title: 'Back to top',
+        path: '#JumpMenuTop'
+      }
+  const jumpMenu: BreadcrumbPathObject = {
+    title: 'Jump to…',
+    path: '#',
+    children: theJumpLinks.value as BreadcrumbPathObject[]
+  }
+  if (theJumpLinks.value) {
+    breadcrumb = [rootItem, jumpMenu]
+  }
+  return breadcrumb as BreadcrumbPathObject[] | undefined
+})
+defineExpose({
+  NavJumpMenuRef
+})
+onMounted(() => {
+  mixinUpdateSecondary(theBreadcrumbs.value, true)
+})
+const route = useRoute()
+
+// repopulate the store with the jump links since the store is cleared on route changes
+watch(
+  route,
+  () => {
+    mixinUpdateSecondary(theBreadcrumbs.value, true)
+  }
+  // { flush: 'pre', immediate: true, deep: true }
+)
+</script>
+<style lang="scss">
+.NavJumpMenu {
+  &.-hide-until-threshold {
+    @apply opacity-0 h-0 transition-none overflow-visible;
+    &.-is-sticky,
+    &.-is-sticky-offset {
+      @apply opacity-100 transition-opacity;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
new file mode 100644
index 00000000..c4f16834
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
@@ -0,0 +1,74 @@
+<template>
+  <ul class="NavJumpMenuContent bg-white">
+    <li
+      v-for="(child, index) in item.children"
+      :key="index"
+      class="text-base border-b border-gray-light"
+    >
+      <BaseLink
+        :href="child.path"
+        variant="none"
+        :link-class="linkClass(child)"
+      >
+        <span>
+          {{ child.title }}
+        </span>
+      </BaseLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface NavItemObject {
+  path: String
+  title: String
+  children: [Object]
+}
+export default defineComponent({
+  name: 'NavJumpMenuContent',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the tertiary nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    linkClass(item?: NavItemObject) {
+      // default
+      let computedClass = 'py-2 lg:py-4'
+      if (!item) {
+        // if first (aka Overview)
+        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+      } else if (item.children && item.children.length > 0) {
+        // if has children
+        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+      }
+      return computedClass
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavJumpMenuContent {
+  a {
+    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
+
+    > span {
+      @apply border-b border-transparent pb-2px;
+    }
+
+    &:hover {
+      > span {
+        @apply border-gray-dark text-gray-dark;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/NavMobile/NavMobile.vue b/packages/vue/src/components/NavMobile/NavMobile.vue
index 22c70b16..a270d594 100644
--- a/packages/vue/src/components/NavMobile/NavMobile.vue
+++ b/packages/vue/src/components/NavMobile/NavMobile.vue
@@ -115,6 +115,7 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
+import { eventBus } from './../../utils/eventBus'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import { useHeaderStore } from './../../store/header'
@@ -216,10 +217,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    // // TODO: VUE3: find solution for emitting event from slot
-    // // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeMenu)
+    eventBus.on('linkClicked', () => this.closeMenu())
   },
   methods: {
     toggleMenu() {
diff --git a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
index 4b217b51..330d60cc 100644
--- a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
@@ -42,6 +42,7 @@
             </template>
             <template v-else>
               <NavMobileLink
+                v-if="!headerStore.secondaryNavIsJumpMenu && index !== 0"
                 :key="index"
                 :title="index === 0 ? 'Home' : undefined"
                 :data="item"
@@ -59,7 +60,10 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import type { LinkObject } from '../../utils/mixins'
+import { eventBus } from './../../utils/eventBus'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
@@ -98,16 +102,16 @@ export default defineComponent({
       theDropdown: null
     }
   },
+  computed: {
+    ...mapStores(useHeaderStore)
+  },
   mounted() {
     if (this.startOpen) {
       this.dropdownVisible = true
     }
     this.theDropdown = this.$refs.NavDropdownMobile as HTMLElement
     if (!this.expandMultiple) {
-      // TODO: VUE3: find solution for emitting event from slot
-      // TODO: find a cleaner way to do this w/o using mounted or root level events
-      // scoped slots? https://github.com/vuejs/vue/issues/4332
-      // this.$root?.$on('openMobileDropdown', this.closeIfOtherOpened)
+      eventBus.on('openMobileDropdown', () => this.closeIfOtherOpened())
     }
   },
   methods: {
diff --git a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
index 969d1b3d..5faca869 100644
--- a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
@@ -18,6 +18,7 @@
         <NavSecondaryDropdownContent
           class="relative w-full text-lg"
           :item="item"
+          :include-overview="!headerStore.secondaryNavIsJumpMenu"
         />
       </slot>
     </template>
@@ -27,6 +28,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mixinIsActivePath } from '../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -58,6 +61,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useHeaderStore),
     startOpen(): Boolean {
       if (this.item) {
         return mixinIsActivePath(this.item.path)
@@ -79,7 +83,6 @@ export default defineComponent({
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
index 678449a9..206adf51 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
@@ -1,7 +1,7 @@
 import NavSecondary from './NavSecondary.vue'
 
 export default {
-  title: 'Navigation/Secondary Navigation/NavSecondary',
+  title: 'Navigation/Secondary Navigation',
   component: NavSecondary,
   excludeStories: /.*Data$/,
   parameters: {
@@ -19,6 +19,11 @@ export const NavSecondaryData = {
 }
 
 export const BaseStory = {
-  name: 'NavSecondary',
-  args: { breadcrumb: NavSecondaryData.breadcrumb }
+  name: 'Secondary Navigation',
+  args: {
+    breadcrumb: NavSecondaryData.breadcrumb
+  }
+}
+export const Inverted = {
+  args: { breadcrumb: NavSecondaryData.breadcrumb, invert: true }
 }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index 706e27cc..e6d4b6d5 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -4,11 +4,17 @@
     ref="NavSecondary"
     aria-label="Secondary"
     class="NavSecondary"
-    :class="{ 'has-intro': hasIntro }"
+    :class="{
+      'has-intro': hasIntro,
+      '!bg-transparent': invert
+    }"
   >
-    <div class="max-w-screen-3xl mx-auto">
+    <div
+      class="max-w-screen-3xl mx-auto"
+      :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
+    >
       <div
-        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50 edu:border-0"
+        :class="`nav-secondary-container lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark  border-opacity-50'}`"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">
@@ -18,6 +24,7 @@
                 :item="item"
                 :index="index"
                 :is-last="theBreadcrumb && index === theBreadcrumb.length - 1"
+                :invert="invert"
               />
             </template>
             <template v-else>
@@ -25,6 +32,7 @@
                 :key="index"
                 :item="item"
                 :index="index"
+                :invert="invert"
               />
             </template>
           </template>
@@ -38,6 +46,7 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
+import { useThemeStore } from './../../store/theme'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
 import NavSecondaryLink from './NavSecondaryLink.vue'
 import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
@@ -49,19 +58,27 @@ export default defineComponent({
    ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
    ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
    */
+  name: 'NavSecondary',
   components: {
     NavSecondaryDropdown,
     NavSecondaryLink
   },
   props: {
+    // breadcrumbs create a secondary navigation
     breadcrumb: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     hasIntro: {
       type: Boolean,
       required: false,
       default: false
+    },
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -71,7 +88,8 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useHeaderStore),
-    theBreadcrumb(): [BreadcrumbPathObject] | undefined {
+    ...mapStores(useThemeStore),
+    theBreadcrumb(): BreadcrumbPathObject[] | undefined {
       if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
@@ -118,7 +136,9 @@ export default defineComponent({
         ([e]) => {
           e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
         },
-        { threshold: [1] }
+        {
+          threshold: [1]
+        }
       )
       const observerOffset = new IntersectionObserver(
         ([e]) => {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index 12c26a71..6e73e390 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -10,21 +10,14 @@
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="font-medium border-t-2 border-transparent block px-3 py-2"
-      :class="{
-        'mr-auto text-primary font-semibold secondary-root': index === 0,
-        'text-gray-dark': index !== 0,
-        '-open': dropdownVisible
-      }"
+      :class="dropdownToggleClasses(index)"
+      :invert="invert"
       @toggle-clicked="toggleDropdown()"
       @close-dropdown="closeDropdown()"
     >
       <span
         class="flex content-center pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
-        :class="
-          index === 0
-            ? 'can-hover:group-hover:border-primary'
-            : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
-        "
+        :class="dropdownButtonClasses(index)"
       >
         <span>{{ item.title }}</span>
         <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
@@ -47,6 +40,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -62,7 +56,8 @@ export default defineComponent({
     // the index from the parent v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: 0
     },
     isLast: {
       type: Boolean,
@@ -73,8 +68,15 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'openDropdown'],
   data() {
     return {
       dropdownVisible: false
@@ -88,15 +90,10 @@ export default defineComponent({
     }
   },
   mounted() {
-    // TODO: VUE3: find solution for emitting event from slot
-    // https://stackoverflow.com/questions/50181858/this-root-emit-not-working-in-vue
-    // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeDropdown)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {
@@ -120,6 +117,28 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    dropdownToggleClasses(index: number) {
+      return this.invert
+        ? {
+            'mr-auto text-white font-semibold secondary-root': index === 0,
+            'text-white': index !== 0,
+            '-open': this.dropdownVisible
+          }
+        : {
+            'mr-auto text-primary font-semibold secondary-root': index === 0,
+            'text-gray-dark': index !== 0,
+            '-open': this.dropdownVisible
+          }
+    },
+    dropdownButtonClasses(index: number) {
+      const titleButton = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularButton = this.invert
+        ? 'can-hover:group-hover:border-white can-hover:group-hover:text-white'
+        : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark'
+      return index === 0 ? titleButton : regularButton
     }
   }
 })
@@ -131,6 +150,11 @@ export default defineComponent({
       > span {
         @apply border-black text-gray-dark #{!important};
       }
+      &.-invert {
+        > span {
+          @apply border-white text-white #{!important};
+        }
+      }
     }
 
     &.-active {
@@ -138,12 +162,23 @@ export default defineComponent({
         @apply font-bold text-gray-dark;
         @apply border-primary #{!important};
       }
+      &.-invert {
+        > span {
+          @apply text-white;
+          @apply border-white #{!important};
+        }
+      }
     }
     &:hover {
       &.-active {
         > span {
           @apply text-gray-mid-dark;
         }
+        &.-invert {
+          > span {
+            @apply text-white;
+          }
+        }
       }
     }
   }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
index 58ce12fc..d11acc03 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="NavSecondaryDropdownContent">
-    <li>
+    <li v-if="includeOverview">
       <BaseLink
         :to="item.path"
         variant="none"
@@ -80,6 +80,10 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+    includeOverview: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
index 0d73c921..c57641f2 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
@@ -1,19 +1,15 @@
 <template>
   <BaseLink
-    :href="isExternal(item.path) ? item.path : null"
-    :to="!isExternal(item.path) ? item.path : null"
+    :href="isExternal(item.path) ? item.path : undefined"
+    :to="!isExternal(item.path) ? item.path : undefined"
     link-class="block px-3 py-2"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"
-    :class="index === 0 ? 'mr-auto text-primary font-semibold secondary-root' : 'text-gray-dark'"
+    :class="baseLinkClasses(index)"
   >
     <span
       class="inline-block pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
-      :class="
-        index === 0
-          ? 'can-hover:group-hover:border-primary'
-          : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
-      "
+      :class="spanClasses(index)"
     >
       {{ item.title }}
     </span>
@@ -21,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BasicLinkObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 export default defineComponent({
   name: 'NavSecondaryLink',
@@ -32,12 +29,17 @@ export default defineComponent({
     // the index from the v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: undefined
     },
     // the nav item object that includes path and title
     item: {
-      type: Object,
+      type: Object as PropType<BasicLinkObject>,
       required: true
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -46,6 +48,23 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    baseLinkClasses(index: number | undefined) {
+      let rootClasses = 'mr-auto font-semibold secondary-root'
+      rootClasses = this.invert
+        ? `${rootClasses} text-white -invert`
+        : `${rootClasses} text-primary`
+      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+      return index === 0 ? rootClasses : regularClasses
+    },
+    spanClasses(index: number | undefined) {
+      const rootClasses = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularClasses = this.invert
+        ? 'can-hover:group-hover:border-white can-hover:group-hover:text-white'
+        : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark'
+      return index === 0 ? rootClasses : regularClasses
     }
   }
 })
@@ -58,5 +77,13 @@ export default defineComponent({
       @apply border-primary #{!important};
     }
   }
+  &.-invert {
+    .nuxt-link-exact-active {
+      span {
+        @apply font-bold text-white;
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index c4542002..c1a4c93a 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -1,12 +1,18 @@
 export interface BreadcrumbPathObject {
   path: string
   title: string
-  children: any[]
+  children: BreadcrumbPathObject[]
+}
+export interface BasicLinkObject {
+  title: string
+  path: string
 }
 
 export interface BlockData {
   blockType: string
   field?: string
+  heading?: string
+  level?: string
   items?: any[]
 }
 export interface ImageSrcObject {
diff --git a/packages/vue/src/store/header.ts b/packages/vue/src/store/header.ts
index 1af027f1..f9710a47 100644
--- a/packages/vue/src/store/header.ts
+++ b/packages/vue/src/store/header.ts
@@ -11,6 +11,7 @@ export interface State {
   highlightPrimary: boolean
   globalChildren?: any | null
   secondaryNav?: any | null
+  secondaryNavIsJumpMenu: boolean
 }
 
 export const useHeaderStore = defineStore('header', {
@@ -19,7 +20,8 @@ export const useHeaderStore = defineStore('header', {
       headerTransparent: false,
       highlightPrimary: true,
       globalChildren: null,
-      secondaryNav: null
+      secondaryNav: null,
+      secondaryNavIsJumpMenu: false
     }
   },
   actions: {
@@ -35,6 +37,9 @@ export const useHeaderStore = defineStore('header', {
     },
     updateSecondary(value: any) {
       this.secondaryNav = value
+    },
+    updateSecondaryNavIsJumpMenu(value: boolean) {
+      this.secondaryNavIsJumpMenu = value
     }
   }
 })
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index 10225897..2cc74371 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -1,5 +1,5 @@
 import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
-import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { BlockStreamfieldData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduNewsDetail from './PageEduNewsDetail.vue'
 
 export default {
@@ -56,7 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
-      ...BlockStreamfieldTruncatedData
+      ...BlockStreamfieldData
     }
   }
 }
@@ -65,7 +65,8 @@ export const InlineHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline'
+      heroPosition: 'inline',
+      showJumpMenu: true
     }
   }
 }
@@ -74,7 +75,8 @@ export const NoHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      hero: []
+      hero: [],
+      showJumpMenu: true
     }
   }
 }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index b55cbaac..5d69bccc 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
@@ -17,6 +17,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
   readTime: string
@@ -35,6 +36,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   topper: string
   relatedLinks: RelatedLinkObject[]
   body: StreamfieldBlockData[]
+  showJumpMenu: boolean
 }
 
 interface PageEduNewsDetailProps {
@@ -44,6 +46,8 @@ interface PageEduNewsDetailProps {
 // define props
 const props = defineProps<PageEduNewsDetailProps>()
 
+const PageEduNewsDetailJumpMenu = ref()
+
 const heroEmpty = computed(() => {
   return isEmpty(props.data?.heroImage)
 })
@@ -67,6 +71,10 @@ const computedClass = computed(() => {
 const dateTimeArray = computed(() => {
   return props.data.publicationDate.split(' ')
 })
+
+defineExpose({
+  PageEduNewsDetailJumpMenu
+})
 </script>
 <template>
   <div
@@ -76,6 +84,13 @@ const dateTimeArray = computed(() => {
     itemscope
     itemtype="http://schema.org/Article"
   >
+    <NavJumpMenu
+      ref="PageEduNewsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="true"
+    />
+
     <!-- schema.org -->
     <meta
       v-if="data.thumbnailImage && data.thumbnailImage.original"
@@ -147,7 +162,6 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"
diff --git a/packages/vue/src/utils/eventBus.ts b/packages/vue/src/utils/eventBus.ts
new file mode 100644
index 00000000..d87209a4
--- /dev/null
+++ b/packages/vue/src/utils/eventBus.ts
@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export const eventBus = mitt()
diff --git a/packages/vue/src/utils/getHeadingId.ts b/packages/vue/src/utils/getHeadingId.ts
new file mode 100644
index 00000000..d9a6f8bb
--- /dev/null
+++ b/packages/vue/src/utils/getHeadingId.ts
@@ -0,0 +1,5 @@
+import { camelCase } from 'lodash'
+
+export const getHeadingId = (heading: string, index?: number) => {
+  return camelCase(heading + (index ? index : ''))
+}
diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
index de08a565..6310baf3 100644
--- a/packages/vue/src/utils/mixins.ts
+++ b/packages/vue/src/utils/mixins.ts
@@ -123,9 +123,13 @@ export const mixinUpdateGlobalChildren = (value: [BreadcrumbPathObject] | null)
 /* -- mixinUpdateSecondary --
       This mixin is used by the navigation to share secondary nav override items between components
     */
-export const mixinUpdateSecondary = (value: [BreadcrumbPathObject] | null) => {
+export const mixinUpdateSecondary = (
+  value: BreadcrumbPathObject[] | undefined,
+  isJumpMenu: boolean = false
+) => {
   const headerStore = useHeaderStore()
   headerStore.updateSecondary(value)
+  headerStore.updateSecondaryNavIsJumpMenu(isJumpMenu)
 }
 /* -- mixinHighlightPrimary --
       This mixin is used to specify if active primary navigation items should be highlighted/underlined
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27e96634..d018beb8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
       dayjs:
         specifier: ^1.11.11
         version: 1.11.11
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       swiper:
         specifier: ^11.1.3
         version: 11.1.4
@@ -512,6 +515,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       sass:
         specifier: ^1.77.4
         version: 1.77.4