diff --git a/package.json b/package.json
index 4800ca6be..a24e57682 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.44.0",
+  "version": "4.45.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
diff --git a/releases.yml b/releases.yml
index deac174f4..293090734 100644
--- a/releases.yml
+++ b/releases.yml
@@ -1,3 +1,9 @@
+- version: 4.45.0
+  features:
+    - component: In-page navigation
+      url: /docs/patterns/in-page-navigation
+      status: New
+      notes: We've introduced a new in-page navigation pattern.
 - version: 4.44.0
   features:
     - component: Hero section
diff --git a/scss/_base_placeholders.scss b/scss/_base_placeholders.scss
index ce66fa589..75f48eb4c 100644
--- a/scss/_base_placeholders.scss
+++ b/scss/_base_placeholders.scss
@@ -97,6 +97,18 @@
     }
   }
 
+  %vf-pseudo-border--left {
+    position: relative;
+
+    &::before {
+      @extend %vf-pseudo-border;
+      bottom: 0;
+      height: auto;
+      top: 0;
+      width: 1px;
+    }
+  }
+
   %hr {
     background: $colors--theme--border-default;
     border: 0;
diff --git a/scss/_patterns_in-page-navigation.scss b/scss/_patterns_in-page-navigation.scss
new file mode 100644
index 000000000..033db6b6d
--- /dev/null
+++ b/scss/_patterns_in-page-navigation.scss
@@ -0,0 +1,440 @@
+@import 'settings';
+
+/*
+  @classreference
+  in-page-navigation:
+    Root element:
+      .p-in-page-navigation:
+        in-page navigation in default variant.
+      "&.is-sticky":
+        Sticky version of in-page navigation.
+
+    Dropdown toggle:
+      .p-in-page-navigation__dropdown-toggle:
+        Button to toggle between horizontal and vertical dropdown navigation on small/medium screens.
+      .p-in-page-navigation__dropdown-toggle-icon:
+        Chevron icon inside the dropdown toggle button.
+
+    Items list heading:
+      .p-in-page-navigation__heading:
+        Heading for in-page navigation items group (text only).
+
+    Items list:
+      .p-in-page-navigation__list:
+        Group of in-page navigation items (usually a `<ul>` element).
+
+    Item element:
+      .p-in-page-navigation__item:
+        Single item in in-page navigation (usually a `<li>` element). May contain nested items lists.
+
+    Item link:
+      .p-in-page-navigation__link:
+        Single link in the in-page navigation.
+*/
+
+// Shared text styles mixin
+@mixin vf-in-page-navigation-text {
+  @include vf-in-page-navigation-spacing-left;
+
+  padding-bottom: $spv--x-small;
+  padding-right: 0;
+  padding-top: $spv--x-small;
+}
+
+// Shared link styles for large screens and expanded dropdown
+@mixin vf-in-page-navigation-link-vertical {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin vf-p-in-page-navigation {
+  // Use a consistent border width for left-highlight and list border
+  $in-page-navigation-border-width: 3px;
+
+  // Scroll margins for headings within the parent grid section
+  .grid-row:has(.p-in-page-navigation) {
+    /* stylelint-disable selector-max-type */
+    h2,
+    h3,
+    h4 {
+      /* stylelint-enable selector-max-type */
+      scroll-margin-top: 72px;
+
+      @media screen and (width >= $threshold-4-8-col) {
+        scroll-margin-top: 24px;
+      }
+
+      // When the page has a sticky main navigation, increase scroll margin
+      // to account for the fixed header height. This prevents headings from
+      // being hidden behind the navigation when scrolling to anchors.
+      @at-root body:has(.p-navigation.is-sticky) &,
+        body:has(.p-navigation--sliding.is-sticky) & {
+        scroll-margin-top: 120px;
+
+        @media screen and (width >= $threshold-4-8-col) {
+          scroll-margin-top: 80px;
+        }
+      }
+    }
+  }
+
+  // Sticky styles for large screens
+  .p-in-page-navigation {
+    margin-bottom: $spv--strip-regular;
+    max-height: 100vh;
+    overflow-y: auto;
+    position: sticky;
+    top: $spv--strip-shallow;
+  }
+
+  // We re-enable scrolling when the dropdown is expanded on small/medium screens
+  // `is-expanded` class is toggled via JS
+  .p-in-page-navigation.is-expanded {
+    overflow-y: auto;
+  }
+
+  // Custom tooltip styles for scrollable navigation
+  // We dynamically calculate the position using JS
+  .p-in-page-navigation .p-tooltip--right {
+    position: relative;
+
+    .p-tooltip__message {
+      // Position will be set via JS using CSS custom properties
+      left: var(--tooltip-left, auto);
+      // Use fixed positioning to escape overflow clipping
+      position: fixed;
+      top: var(--tooltip-top, auto);
+      z-index: 100;
+    }
+  }
+
+  // Left hand border
+  .p-in-page-navigation__container > .p-in-page-navigation__list {
+    @extend %vf-pseudo-border--left;
+
+    &::before {
+      background-color: $colors--theme--border-low-contrast;
+      width: $in-page-navigation-border-width;
+    }
+  }
+
+  .p-in-page-navigation__list {
+    @extend %vf-list;
+    color: $colors--theme--text-inactive;
+
+    &:last-of-type::after {
+      content: none;
+    }
+  }
+
+  .p-in-page-navigation__heading {
+    @extend %common-default-text-properties;
+    @extend %small-caps-text;
+
+    display: block;
+    font-size: map-get($base-font-sizes, base);
+    font-weight: $font-weight-bold;
+    margin: 0;
+    max-width: none;
+    padding: $spv--x-small 0 $spv--small;
+  }
+
+  .p-in-page-navigation__link {
+    @include vf-in-page-navigation-text;
+    @include vf-in-page-navigation-link-vertical;
+    @include vf-focus-themed;
+
+    color: $colors--theme--text-muted;
+
+    &:visited {
+      color: $colors--theme--text-muted;
+    }
+
+    &:hover {
+      color: $colors--theme--text-default;
+      text-decoration: none;
+    }
+
+    // vf-highlight-bar is rendered above focus outline
+    // so we need to hide it on focus
+    &:focus::before {
+      display: none;
+    }
+
+    // Display the highlight when focussing in modern browsers that support
+    // focus-visible.
+    &:focus:not(:focus-visible)::before {
+      display: block;
+    }
+
+    // Active state for current navigation item
+    &.is-active,
+    &[aria-current='true'] {
+      @extend %vf-pseudo-border--left;
+
+      color: $colors--theme--text-default;
+      cursor: default;
+
+      &::before {
+        background-color: $colors--theme--text-default;
+        width: $in-page-navigation-border-width;
+      }
+    }
+  }
+
+  // Dropdown toggle button
+  .p-in-page-navigation__dropdown-toggle {
+    background-color: $colors--theme--background-default;
+    border: 0;
+    display: none;
+    line-height: map-get($icon-sizes, default);
+    margin: 0;
+    padding: $spv--large $sph--x-large;
+
+    &:focus {
+      @include vf-focus;
+    }
+
+    &:hover {
+      background: $colors--theme--background-default;
+    }
+
+    .p-in-page-navigation__dropdown-toggle-icon {
+      height: map-get($icon-sizes, default);
+      width: map-get($icon-sizes, default);
+    }
+  }
+
+  .p-in-page-navigation__container {
+    position: relative;
+  }
+
+  // Nested 2nd level of navigation indentation
+  .p-in-page-navigation__item .p-in-page-navigation__list .p-in-page-navigation__link {
+    // @media screen and (width >= $threshold-4-8-col) {
+    @include vf-in-page-navigation-spacing-left($multiplier: 2);
+    // }
+  }
+
+  // Small/medium screens
+  @media screen and (width < $threshold-4-8-col) {
+    .p-in-page-navigation {
+      background-color: $colors--theme--background-default;
+      margin-bottom: $spv--strip-shallow;
+      margin-left: (-$spv--x-large);
+      margin-right: (-$spv--x-large);
+      overflow-y: unset;
+    }
+
+    // Sticky styles for parent column
+    // IMPORTANT: Pattern requires a grid-col as a parent
+    [class^='grid-col']:has(> .p-in-page-navigation) {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      > .p-in-page-navigation {
+        position: static;
+      }
+    }
+
+    // Top level navigation list
+    .p-in-page-navigation__container > .p-in-page-navigation__list {
+      background-color: $colors--theme--background-default;
+      padding-left: $spv--large;
+
+      &::before {
+        left: $spv--large;
+      }
+
+      > .p-in-page-navigation__item {
+        scroll-margin-left: $spv--large;
+      }
+    }
+
+    // Hide heading unless dropdown is expanded
+    .p-in-page-navigation__heading {
+      display: none;
+    }
+
+    // Link styles for horizontal layout
+    .p-in-page-navigation__link {
+      display: inline-block;
+      line-height: $spv--x-large;
+      max-width: 33.33vw; // Limit link width to 1/3 viewport
+      overflow: hidden;
+      padding: $spv--medium $spv--large;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+
+      // Adjust active state pseudo-border for horizontal layout
+      &.is-active,
+      &[aria-current='true'] {
+        &::before {
+          height: 50%;
+          top: 25%;
+        }
+      }
+    }
+
+    // Nested link indentation when expanded
+    .p-in-page-navigation.is-expanded .p-in-page-navigation__item .p-in-page-navigation__list .p-in-page-navigation__link {
+      @include vf-in-page-navigation-spacing-left($multiplier: 2);
+    }
+
+    // Container styles for horizontal layout
+    .p-in-page-navigation__container {
+      align-items: center;
+      background-color: $colors--theme--background-default;
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      // Full-width bottom border
+      &::after {
+        background-color: $colors--theme--border-low-contrast;
+        bottom: 0;
+        content: '';
+        height: 1px;
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%);
+        width: 100%;
+      }
+    }
+
+    .p-in-page-navigation__dropdown-toggle {
+      display: block;
+      grid-column: 2;
+      justify-self: end;
+    }
+
+    // Collapsed dropdown styles
+    .p-in-page-navigation:not(.is-expanded) .p-in-page-navigation__container {
+      .p-in-page-navigation__list {
+        grid-column: 1;
+        margin-bottom: 0;
+        min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-behavior: smooth;
+        scrollbar-width: none; // Firefox
+        white-space: nowrap;
+
+        &::-webkit-scrollbar {
+          display: none; // Chrome/Safari/Opera
+        }
+
+        // Remove left side border
+        &::before {
+          content: none;
+        }
+
+        .p-in-page-navigation__item {
+          display: inline-block;
+        }
+      }
+
+      // Hide nested lists
+      .p-in-page-navigation__item .p-in-page-navigation__list {
+        display: none;
+      }
+    }
+
+    // Expanded dropdown styles
+    // Grid layout: [list content | toggle button]
+    //              Row 1: heading *  | toggle
+    //              Row 2: nav list   |
+    // * If present, otherwise nav list is in row 1
+    .p-in-page-navigation.is-expanded .p-in-page-navigation__container {
+      align-items: start;
+      background-color: $colors--theme--background-alt;
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      > .p-in-page-navigation__list {
+        background-color: $colors--theme--background-alt;
+        grid-column: 1 / 2;
+        grid-row: 2;
+        margin-bottom: $spv--large;
+      }
+
+      .p-in-page-navigation__item .p-in-page-navigation__list {
+        display: block;
+      }
+
+      .p-in-page-navigation__heading {
+        display: block;
+        grid-column: 1 / 2;
+        grid-row: 1;
+        padding: $spv--medium $spv--large;
+      }
+
+      // Override for when there is no heading
+      &:not(:has(> .p-in-page-navigation__heading)) > .p-in-page-navigation__list {
+        grid-row: 1;
+        margin-top: $spv--medium;
+      }
+
+      .p-in-page-navigation__dropdown-toggle {
+        background-color: $colors--theme--background-alt;
+        display: block;
+        grid-column: 2 / 3;
+        grid-row: 1;
+        justify-self: end;
+      }
+    }
+
+    .p-in-page-navigation.is-expanded .p-in-page-navigation__link {
+      @include vf-in-page-navigation-text;
+      @include vf-in-page-navigation-link-vertical;
+
+      max-width: unset;
+      padding-right: $spv--large;
+
+      &.is-active,
+      &[aria-current='true'] {
+        &::before {
+          height: auto;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  // Small screens only
+  @media screen and (width < $threshold-4-small-4-med-col) {
+    .p-in-page-navigation {
+      margin-left: (-$spv--large);
+      margin-right: (-$spv--large);
+    }
+
+    .p-in-page-navigation__link {
+      max-width: 50vw; // Limit link width to 1/2 viewport
+    }
+
+    .p-in-page-navigation__dropdown-toggle {
+      padding: $spv--large;
+    }
+  }
+}
+
+// Helper
+
+// elements in side nav should be aligned from left based on grid margin for given screen size
+// additional offset is added when icons are used or for nested navigation levels
+@mixin vf-in-page-navigation-spacing-left(
+  // property to adjust spacing, defaults to `padding-left`
+  $prop: padding-left,
+  // how many times grid margin width should be multiplied (for nested navigation levels)
+  $multiplier: 1
+) {
+  #{$prop}: $multiplier * map-get($grid-margin-widths, small);
+
+  @media screen and (width >= $threshold-4-small-4-med-col) {
+    #{$prop}: $multiplier * map-get($grid-margin-widths, default);
+  }
+}
diff --git a/scss/_patterns_tooltips.scss b/scss/_patterns_tooltips.scss
index fcc745bbe..a51c363bb 100644
--- a/scss/_patterns_tooltips.scss
+++ b/scss/_patterns_tooltips.scss
@@ -15,7 +15,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
 
     &:focus,
     &:hover {
-      .p-tooltip__message {
+      > .p-tooltip__message:first-of-type {
         display: inline;
         text-decoration: initial;
       }
@@ -105,7 +105,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
   .p-tooltip--btm-center {
     @extend %tooltip;
 
-    .p-tooltip__message {
+    > .p-tooltip__message {
       bottom: inherit;
       left: 50%;
       top: 100%;
diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss
index 7a291fe09..106f03bf7 100644
--- a/scss/_vanilla.scss
+++ b/scss/_vanilla.scss
@@ -54,6 +54,7 @@
 @import 'patterns_separator';
 @import 'patterns_side-navigation-expandable';
 @import 'patterns_side-navigation';
+@import 'patterns_in-page-navigation';
 @import 'patterns_slider';
 @import 'patterns_status-label';
 @import 'patterns_strip';
@@ -156,6 +157,7 @@
   @include vf-p-separator;
   @include vf-p-side-navigation;
   @include vf-p-side-navigation-expandable;
+  @include vf-p-in-page-navigation;
   @include vf-p-slider;
   @include vf-p-status-label;
   @include vf-p-strip;
diff --git a/scss/standalone/patterns_in-page-navigation.scss b/scss/standalone/patterns_in-page-navigation.scss
new file mode 100644
index 000000000..7ab3799ea
--- /dev/null
+++ b/scss/standalone/patterns_in-page-navigation.scss
@@ -0,0 +1,10 @@
+@import '../vanilla';
+@include vf-base;
+
+@include vf-p-in-page-navigation;
+
+// icons used for dropdown chevron
+@include vf-p-icons;
+
+// grid is used in group example with differents side nav variants
+@include vf-p-grid;
diff --git a/side-navigation.yaml b/side-navigation.yaml
index 980bb90a6..01da4f1bf 100644
--- a/side-navigation.yaml
+++ b/side-navigation.yaml
@@ -125,6 +125,8 @@
       url: /docs/patterns/equal-heights
     - title: Hero
       url: /docs/patterns/hero
+    - title: In-page navigation
+      url: /docs/patterns/in-page-navigation
     - title: Rich list (horizontal)
       url: /docs/patterns/rich-list-horizontal
     - title: Rich list (vertical)
diff --git a/templates/_macros/vf_in-page-navigation.jinja b/templates/_macros/vf_in-page-navigation.jinja
new file mode 100644
index 000000000..eebd1d3b8
--- /dev/null
+++ b/templates/_macros/vf_in-page-navigation.jinja
@@ -0,0 +1,93 @@
+{# 
+  Parameters:
+    - title (string) (optional): The text to be displayed as the title. Defauts to None and doesn"t render.
+    - navigation_items (list<object>) (optional): A list of navigation items to be included in the in-page navigation. Each item is an object with the following properties:
+      - id (string) (required): The ID of the section to link to.
+      - text (string) (required): The text to be displayed for the navigation item.
+    - scope (string) (optional): Rendering mode for navigation items.
+      - "manual" (default): Render from `navigation_items`.
+      - "full-page": Autogenerate from headings via JS.
+    - primary_heading (string) (optional, requires scope="full-page"): The heading level to treat as primary. Accepts "h2" or "h3".
+    - secondary_heading (string) (optional, requires primary_heading): The heading level to treat as secondary. Accepts "h3" or "h4" 
+    - excludes (list<string>) (optional): A list of exclusions for headings (only applies when scope="full-page").
+        Supports two formats:
+          - CSS selector (e.g. "#some-id", ".some-class"): excludes headings matching the selector.
+          - Text match (e.g. "text:Newsletter signup"): excludes headings whose text content matches (case-insensitive).
+#}
+
+{%- macro vf_in_page_navigation(title=None, navigation_items=[], scope="full-page", primary_heading="h2", secondary_heading=None, excludes=[]) -%}
+  {%- set nav_id = "in-page-navigation-list" -%}
+  {%- set valid_primary_headings = ["h2", "h3"] %}
+  {%- set valid_secondary_headings = ["h3", "h4"] %}
+  {%- set valid_scopes = ["full-page", "manual"] %}
+  {%- if scope not in valid_scopes -%}
+    {%- set scope = "full-page" -%}
+  {%- endif -%}
+  {%- set excludes_queries = excludes | join(",") + ",.p-in-page-navigation__heading" -%}
+
+  <div class="p-in-page-navigation"
+       data-in-page-navigation-scope="{{ scope }}"
+       {%- if primary_heading and primary_heading in valid_primary_headings -%} data-in-page-navigation-primary="{{ primary_heading }}" {%- if secondary_heading and secondary_heading in valid_secondary_headings -%} data-in-page-navigation-secondary="{{ secondary_heading }}" {%- endif -%} {%- else -%} data-in-page-navigation-primary="h2" {% endif %}
+       data-in-page-navigation-excludes="{{ excludes_queries }}">
+
+    <nav class="p-in-page-navigation__container"
+         aria-label="{% if title %}{{ title }}{% else %}In-page navigation{% endif %}">
+
+      {%- if title -%}
+        <h3 class="p-in-page-navigation__heading">{{ title | safe }}</h3>
+      {%- endif -%}
+      <ul class="p-in-page-navigation__list js-in-page-nav-list"
+          id="{{ nav_id }}"
+          aria-expanded="false">
+        {%- if scope != "full-page" -%}
+          {%- for item in navigation_items -%}
+            <li class="p-in-page-navigation__item p-tooltip--right"
+                aria-describedby="{{ item.id }}-tooltip">
+              <a class="p-in-page-navigation__link{% if loop.first %} is-active{% endif %}"
+                 href="#{{ item.id }}">{{ item.text }}</a>
+              <span class="p-tooltip__message u-hide"
+                    role="tooltip"
+                    id="{{ item.id }}-tooltip">{{ item.text }}</span>
+              {%- if item.children -%}
+                <ul class="p-in-page-navigation__list">
+                  {%- for child in item.children -%}
+                    <li class="p-in-page-navigation__item p-tooltip--right"
+                        aria-describedby="{{ child.id }}-tooltip">
+                      <a class="p-in-page-navigation__link" href="#{{ child.id }}">{{ child.text }}</a>
+                      <span class="p-tooltip__message u-hide"
+                            role="tooltip"
+                            id="{{ child.id }}-tooltip">{{ child.text }}</span>
+                    </li>
+                  {%- endfor -%}
+                </ul>
+              {%- endif -%}
+            </li>
+          {%- endfor -%}
+        {%- endif -%}
+      </ul>
+
+      <button class="p-in-page-navigation__dropdown-toggle"
+              aria-expanded="false"
+              aria-controls="{{ nav_id }}">
+        <i class="p-icon--chevron-down p-in-page-navigation__dropdown-toggle-icon"></i>
+        <i class="p-icon--chevron-up p-in-page-navigation__dropdown-toggle-icon u-hide"></i>
+      </button>
+
+    </nav>
+  </div>
+
+  {# Templates for JS auto-generation (used when scope="full-page") #}
+  {%- if scope == "full-page" -%}
+    <template class="js-in-page-nav-template-item">
+      <li class="p-in-page-navigation__item p-tooltip--right"
+          aria-describedby="#">
+        <a class="p-in-page-navigation__link" href="#"></a>
+        <span class="p-tooltip__message u-hide" role="tooltip" id="#"></span>
+      </li>
+    </template>
+    <template class="js-in-page-nav-template-sublist">
+      <ul class="p-in-page-navigation__list">
+      </ul>
+    </template>
+  {%- endif -%}
+{%- endmacro -%}
diff --git a/templates/docs/examples/patterns/in-page-navigation/_in-page-navigation.js b/templates/docs/examples/patterns/in-page-navigation/_in-page-navigation.js
new file mode 100644
index 000000000..d0f4f393e
--- /dev/null
+++ b/templates/docs/examples/patterns/in-page-navigation/_in-page-navigation.js
@@ -0,0 +1,432 @@
+/**
+ * Init:
+ *  - Generates in-page navigation if scope is set to "full-page".
+ *  - Initializes navigation interactions.
+ */
+document.addEventListener('DOMContentLoaded', () => {
+  const documentBody = document.querySelector('body');
+  const navRoots = documentBody.querySelectorAll('.p-in-page-navigation');
+  navRoots.forEach((navRoot) => {
+    buildInPageNavigation(navRoot);
+    initNavigationInteraction(navRoot);
+  });
+});
+
+/**
+ * Build the navigation list from page headings.
+ * @param {HTMLElement} navRoot - The .p-in-page-navigation element
+ */
+function buildInPageNavigation(navRoot) {
+  if (!navRoot) {
+    return;
+  }
+
+  // If not full-page, assume manual navigation structure
+  const scope = navRoot.dataset.inPageNavigationScope;
+  if (scope !== 'full-page') {
+    return;
+  }
+
+  const selectors = generateSelectors(navRoot);
+  const headings = getHeadings(navRoot, selectors);
+  if (!headings.length) {
+    return;
+  }
+
+  const navList = navRoot.querySelector('.js-in-page-nav-list');
+  const itemTemplate = document.querySelector('.js-in-page-nav-template-item');
+  const sublistTemplate = document.querySelector('.js-in-page-nav-template-sublist');
+  let currentPrimaryItem = null;
+  let currentNestedList = null;
+  let isFirst = true;
+
+  headings.forEach((heading) => {
+    const id = generateHeadingId(heading);
+    const text = heading.textContent.trim().replace(/\s+/g, ' '); // Remove whitespace
+    const tooltipId = `${id}-tooltip`;
+    const isPrimaryList = heading.matches(selectors.primarySelector);
+    const itemClone = itemTemplate.content.cloneNode(true);
+    const li = itemClone.querySelector('li');
+    const link = itemClone.querySelector('a');
+    const tooltipWrapper = itemClone.querySelector('.p-tooltip--right');
+    const tooltipMessage = itemClone.querySelector('.p-tooltip__message');
+
+    link.href = `#${id}`;
+    link.textContent = text;
+    tooltipWrapper.setAttribute('aria-describedby', tooltipId);
+    tooltipMessage.id = tooltipId;
+    tooltipMessage.textContent = text;
+
+    if (isFirst) {
+      link.classList.add('is-active');
+      isFirst = false;
+    }
+
+    if (isPrimaryList) {
+      // Append to main list
+      navList.appendChild(li);
+      currentPrimaryItem = li;
+      currentNestedList = null;
+    } else if (selectors.secondarySelector && currentPrimaryItem) {
+      // Append to sublist under current primary list
+      if (!currentNestedList) {
+        const nestedListClone = sublistTemplate.content.cloneNode(true);
+        currentNestedList = nestedListClone.querySelector('ul');
+        currentPrimaryItem.appendChild(currentNestedList);
+      }
+      if (currentNestedList) {
+        currentNestedList.appendChild(li);
+      }
+    } else {
+      navList.appendChild(li);
+    }
+  });
+}
+
+/**
+ * Initializes navigation interactions:
+ *  - Dropdown toggle for mobile view
+ *  - Intersection observer to highlight active section in navigation
+ * @param {HTMLElement} navRoot - The .p-in-page-navigation element
+ */
+function initNavigationInteraction(navRoot) {
+  const toggle = navRoot.querySelector('.p-in-page-navigation__dropdown-toggle');
+  const navList = navRoot.querySelector('.js-in-page-nav-list');
+
+  if (toggle && navList) {
+    toggle.addEventListener('click', function () {
+      if (toggle.getAttribute('aria-expanded') === 'true') {
+        navRoot.classList.remove('is-expanded');
+        toggle.setAttribute('aria-expanded', 'false');
+        navList.setAttribute('aria-expanded', 'false');
+        toggle.querySelector('.p-icon--chevron-down').classList.remove('u-hide');
+        toggle.querySelector('.p-icon--chevron-up').classList.add('u-hide');
+        // Ensure active item is visible in horizontal layout
+        scrollActiveNavItemIntoView();
+      } else {
+        navRoot.classList.add('is-expanded');
+        toggle.setAttribute('aria-expanded', 'true');
+        navList.setAttribute('aria-expanded', 'true');
+        toggle.querySelector('.p-icon--chevron-down').classList.add('u-hide');
+        toggle.querySelector('.p-icon--chevron-up').classList.remove('u-hide');
+      }
+    });
+  }
+
+  const selectors = generateSelectors(navRoot);
+  const headings = getHeadings(navRoot, selectors);
+  const navigationLinks = getNavigationLinks(navRoot);
+
+  /**
+   * Updates the active navigation link based on the given heading ID.
+   * Also scrolls the active link into view if it's in horizontal layout.
+   * @param {string} headingId - The ID of the currently active heading.
+   */
+  function updateActiveLink(headingId) {
+    const targetLink = navRoot.querySelector(`a[href='#${headingId}']`);
+    // Ignore links that are hidden in horizontal layout
+    const parentList = targetLink ? targetLink.closest('.p-in-page-navigation__list') : null;
+
+    if (!targetLink || !parentList || window.getComputedStyle(parentList, null).display === 'none') {
+      return;
+    }
+
+    navigationLinks.forEach((link) => {
+      if (link.getAttribute('href') === `#${headingId}`) {
+        link.classList.add('is-active');
+        scrollActiveNavItemIntoView(link);
+      } else {
+        link.classList.remove('is-active');
+      }
+    });
+  }
+
+  const BREAKPOINTLARGE = 1036;
+  let observer;
+  let lastViewportState = null;
+  function manageObserver() {
+    const isLargeView = getCurrentViewportWidth() >= BREAKPOINTLARGE;
+
+    // Prevent recreating the observer if state hasn't changed
+    if (lastViewportState === isLargeView) {
+      return;
+    }
+    lastViewportState = isLargeView;
+
+    // Cleanup existing observer
+    if (observer) observer.disconnect();
+
+    observer = new IntersectionObserver(
+      function (entries) {
+        if (typeof navItemClicked !== 'undefined' && navItemClicked) {
+          return;
+        }
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            updateActiveLink(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: isLargeView ? '-10% 0px -50% 0px' : '-10% 0px -75% 0px',
+        threshold: 0.5,
+      },
+    );
+
+    headings.forEach((heading) => observer.observe(heading));
+  }
+
+  // Initialize observer
+  manageObserver();
+
+  // Update observer rootMargins on viewport resize
+  window.addEventListener('resize', debounce(manageObserver, 250));
+
+  // Handle navigation link clicks
+  let navItemClicked = false;
+  navigationLinks.forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      e.preventDefault();
+      navItemClicked = true;
+
+      // Handle active state
+      navigationLinks.forEach(function (navLink) {
+        navLink.classList.remove('is-active');
+      });
+      link.classList.add('is-active');
+
+      // Handle smooth scroll
+      const targetId = link.getAttribute('href');
+      const targetHeading = document.querySelector(targetId);
+      if (targetHeading) {
+        targetHeading.setAttribute('tabindex', '-1');
+        targetHeading.focus({preventScroll: true});
+        targetHeading.scrollIntoView({behavior: 'smooth'});
+        history.pushState(null, null, targetId);
+      }
+      // We use a timeout to prevent the IntersectionObserver from immediately
+      // overriding the active state. As the IntersectionObserver points at the
+      // center of the screen
+      setTimeout(() => {
+        navItemClicked = false;
+      }, 1000);
+    });
+  });
+
+  // Show tooltip for links that span more than 2
+  navigationLinks.forEach(function (link) {
+    if (spansMoreThanTwoLines(link)) {
+      const linkContainer = link.parentNode;
+      const tooltip = linkContainer.querySelector('.p-tooltip__message');
+      tooltip.classList.remove('u-hide');
+      attachPositionTooltipListener(linkContainer);
+    }
+  });
+}
+
+// Helper functions
+
+/**
+ * Returns headings to be included in navigation.
+ * @param {HTMLElement} navRoot
+ * @returns {NodeList} List of heading elements matching the defined selectors
+ */
+function getHeadings(navRoot, selectors) {
+  const headings = Array.from(document.querySelectorAll(selectors.query));
+  const excludes = getHeadingExcludes(navRoot, headings);
+  return headings.filter((heading) => !excludes.includes(heading));
+}
+
+/**
+ * Parse exclusion rules and return a list of excluded heading elements.
+ * Supports two formats:
+ *   - CSS selector (e.g. "#some-id", ".some-class")
+ *   - Text match (e.g. "text:Newsletter signup") - case-insensitive
+ * @param {HTMLElement} navRoot
+ * @param {NodeList} headings - all headings being considered
+ * @returns {HTMLElement[]} List of heading elements to exclude
+ */
+function getHeadingExcludes(navRoot, headings) {
+  const excludeAttr = navRoot.dataset.inPageNavigationExcludes;
+  if (!excludeAttr) {
+    return [];
+  }
+
+  const excludeRules = excludeAttr
+    .trim()
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  const excludeList = [];
+
+  excludeRules.forEach((rule) => {
+    if (rule.toLowerCase().startsWith('text:')) {
+      // Text-based exclusion
+      const textToMatch = rule.split('text:')[1].trim().toLowerCase();
+      headings.forEach((heading) => {
+        if (heading.textContent.trim().toLowerCase() === textToMatch) {
+          excludeList.push(heading);
+        }
+      });
+    } else {
+      // CSS selector exclusion
+      try {
+        const matched = document.querySelector(rule);
+        if (matched) {
+          excludeList.push(matched);
+        }
+      } catch (e) {
+        console.warn(`In-page navigation: Invalid exclude selector "${rule}"`);
+      }
+    }
+  });
+  return excludeList;
+}
+
+/**
+ * Generate CSS selectors for query based heading retrieval.
+ * @param {HTMLElement} navRoot
+ * @returns {Object} An object containing primarySelector, secondarySelector, and a query string
+ */
+function generateSelectors(navRoot) {
+  const primarySelector = navRoot.dataset.inPageNavigationPrimary;
+  const secondarySelector = navRoot.dataset.inPageNavigationSecondary ?? null;
+  const query = secondarySelector ? `${primarySelector}, ${secondarySelector}` : primarySelector;
+  return {primarySelector, secondarySelector, query};
+}
+
+/**
+ * Checks for heading ID and generates on from text content if missing
+ * @param {HTMLElement} heading
+ * @returns {string} The heading ID
+ */
+function generateHeadingId(heading) {
+  if (heading.id && !document.getElementById(heading.id)) {
+    return heading.id;
+  }
+
+  let baseId = slugify(heading.textContent);
+  let id = baseId;
+
+  // Handle duplicate IDs
+  let counter = 1;
+  while (document.getElementById(id)) {
+    appendix = counter == 1 ? '' : `-${counter}`;
+    id = baseId + appendix;
+    counter++;
+  }
+
+  heading.id = id;
+  return id;
+}
+
+/**
+ * Returns all navigation links within the given navigation root.
+ * @param {HTMLElement} navRoot
+ * @returns {NodeList} List of navigation link elements
+ */
+function getNavigationLinks(navRoot) {
+  return navRoot.querySelectorAll('.p-in-page-navigation__link');
+}
+
+/**
+ * Converts a string to a href friendly slug.
+ * @param {string} text - The text content of the heading
+ * @return {string} A slugified version of the text
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+}
+
+/**
+ * Checks if the content of an element would span more than 2 lines if not truncated
+ * To do this we have to recreate the original height without clamping
+ * and then check the number of lines.
+ * @param {HTMLElement} element
+ * @returns {boolean} True if the content would be more than 2 lines, else false.
+ */
+function spansMoreThanTwoLines(element) {
+  const originalDisplay = element.style.display;
+  const originalLineClamp = element.style.webkitLineClamp;
+
+  element.style.display = 'block';
+  element.style.webkitLineClamp = 'unset';
+
+  const style = window.getComputedStyle(element);
+  const lineHeight = parseFloat(style.lineHeight);
+  const height = element.getBoundingClientRect().height;
+
+  // Restore original styles
+  element.style.display = originalDisplay;
+  element.style.webkitLineClamp = originalLineClamp;
+
+  return height > lineHeight * 3;
+}
+
+/**
+ * Scrolls the active navigation item into view in horizontal layout.
+ * @param {HTMLElement} link - The active navigation link
+ */
+function scrollActiveNavItemIntoView(link) {
+  if (!link) {
+    link = document.querySelector('.p-in-page-navigation__link.is-active');
+  }
+  const listItem = link.closest('.p-in-page-navigation__item');
+  if (listItem) {
+    listItem.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start',
+    });
+  }
+}
+
+/**
+ * Returns the current viewport width.
+ * @returns {number} The width of the viewport in pixels
+ */
+function getCurrentViewportWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+/**
+ * Position tooltips in scrollable navigation using fixed positioning.
+ * This is is a workaround as the tooltips are contained in an overflow:auto container
+ * that allows the navigation to be scrollable. This means the tooltip would usually get clipped.
+ * So we manually position the tooltip with JS. If JS is disabled, so are tooltips.
+ * @param {HTMLElement} tooltipContainer - The .p-tooltip element
+ */
+function attachPositionTooltipListener(tooltipContainer) {
+  const tooltipMessage = tooltipContainer.querySelector('.p-tooltip__message');
+  if (!tooltipMessage) return;
+
+  // One hover update the tooltip position property to be used in CSS
+  tooltipContainer.addEventListener('mouseenter', function () {
+    const rect = tooltipContainer.getBoundingClientRect();
+    tooltipMessage.style.setProperty('--tooltip-left', `${rect.right + 8}px`);
+    tooltipMessage.style.setProperty('--tooltip-top', `${rect.top + 24}px`);
+  });
+}
+
+/**
+ * Debounce helper
+ * @param {Function} func - The function to debounce
+ * @param {number} wait - The debounce delay in milliseconds
+ * @return {Function} A debounced version of the input function
+ */
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
diff --git a/templates/docs/examples/patterns/in-page-navigation/component-with-optional-heading.html b/templates/docs/examples/patterns/in-page-navigation/component-with-optional-heading.html
new file mode 100644
index 000000000..bcf47ca59
--- /dev/null
+++ b/templates/docs/examples/patterns/in-page-navigation/component-with-optional-heading.html
@@ -0,0 +1,81 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_in-page-navigation.jinja" import vf_in_page_navigation %}
+
+{% block title %}In-page navigation / manual with optional heading{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+
+  {% set page_navigation_data = [
+    {
+      "id": "identifying-a-kernel",
+      "text": "Identifying a kernel"
+    },
+    {
+      "id": "kernel-security",
+      "text": "Kernel security",
+      "children": [
+        {
+          "id": "general-availability-ga-and-variant-ubuntu-kernels",
+          "text": "General Availability (GA) and variant Ubuntu kernels"
+        },
+        {
+          "id": "optimized-kernels",
+          "text": "Optimized kernels"
+        },
+      ]
+    },
+    {
+      "id": "variant-categories",
+      "text": "Variant categories"
+    },
+    {
+      "id": "current-variant-kernels",
+      "text": "Current variant kernels"
+    },
+    {
+      "id": "additional-kernel-variants",
+      "text": "Additional kernel variants",
+      "children": [
+        {
+          "id": "version-specific-kernels",
+          "text": "Version-specific kernels"
+        },
+        {
+          "id": "configuration-specific-kernels",
+          "text": "Configuration-specific kernels"
+        },
+        {
+          "id": "platform-specific-kernels",
+          "text": "Platform-specific kernels"
+        }
+      ]
+    }
+  ] %}
+
+  <div class="grid-row">
+    <div class="grid-col-6 grid-col-start-large-3">
+      <div class="p-section--hero">
+        <h1>A hero at the top</h1>
+      </div>
+    </div>
+  </div>
+  <div class="grid-row">
+    <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+      {{ vf_in_page_navigation(
+              title="Optional heading",
+              navigation_items=page_navigation_data,
+              scope="manual") }}
+    </div>
+    <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
+      <h2>The main content goes here</h2>
+    </div>
+    <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+      <h3>Side-content goes here</h3>
+    </div>
+  </div>
+
+  <script>
+    {% include "docs/examples/patterns/in-page-navigation/_in-page-navigation.js" %}
+  </script>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/in-page-navigation/component.html b/templates/docs/examples/patterns/in-page-navigation/component.html
new file mode 100644
index 000000000..4d72d26ab
--- /dev/null
+++ b/templates/docs/examples/patterns/in-page-navigation/component.html
@@ -0,0 +1,80 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_in-page-navigation.jinja" import vf_in_page_navigation %}
+
+{% block title %}In-page navigation / manual{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+
+  {% set page_navigation_data = [
+    {
+      "id": "identifying-a-kernel",
+      "text": "Identifying a kernel"
+    },
+    {
+      "id": "kernel-security",
+      "text": "Kernel security",
+      "children": [
+        {
+          "id": "general-availability-ga-and-variant-ubuntu-kernels",
+          "text": "General Availability (GA) and variant Ubuntu kernels for different hardware and workloads"
+        },
+        {
+          "id": "optimized-kernels",
+          "text": "Optimized kernels"
+        },
+      ]
+    },
+    {
+      "id": "variant-categories",
+      "text": "Variant categories"
+    },
+    {
+      "id": "current-variant-kernels",
+      "text": "Current variant kernels"
+    },
+    {
+      "id": "additional-kernel-variants",
+      "text": "Additional kernel variants",
+      "children": [
+        {
+          "id": "version-specific-kernels",
+          "text": "Version-specific kernels"
+        },
+        {
+          "id": "configuration-specific-kernels",
+          "text": "Configuration-specific kernels"
+        },
+        {
+          "id": "platform-specific-kernels",
+          "text": "Platform-specific kernels"
+        }
+      ]
+    }
+  ] %}
+
+  <div class="grid-row">
+    <div class="grid-col-6 grid-col-start-large-3">
+      <div class="p-section--hero">
+        <h1>A hero at the top</h1>
+      </div>
+    </div>
+  </div>
+  <div class="grid-row">
+    <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+      {{ vf_in_page_navigation(
+              navigation_items=page_navigation_data,
+              scope="manual") }}
+    </div>
+    <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
+      <h2>The main content goes here</h2>
+    </div>
+    <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+      <h3>Side-content goes here</h3>
+    </div>
+  </div>
+
+  <script>
+    {% include "docs/examples/patterns/in-page-navigation/_in-page-navigation.js" %}
+  </script>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/in-page-navigation/full-page.html b/templates/docs/examples/patterns/in-page-navigation/full-page.html
new file mode 100644
index 000000000..ba1c251da
--- /dev/null
+++ b/templates/docs/examples/patterns/in-page-navigation/full-page.html
@@ -0,0 +1,253 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_in-page-navigation.jinja" import vf_in_page_navigation %}
+
+{% block title %}In-page navigation / Full-page{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+  <section class="p-section--hero">
+    <div class="grid-row">
+      <div class="grid-col-6 grid-col-start-large-3">
+        <h1>What is the Linux kernel?</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="p-section">
+    <div class="grid-row">
+      <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+        {{ vf_in_page_navigation(scope="full-page",
+                primary_heading="h2",
+                secondary_heading="h3",
+                excludes=["text:Newsletter signup"]) }}
+      </div>
+      <div class="grid-col-4">
+        <h2>Identifying a kernel</h2>
+        <p>The easiest way to determine the kernel you're running is to type</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code></pre>
+        </div>
+        <p>on the terminal. For example:</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code><br /><code>Ubuntu 5.4.0-12.15-generic 5.4.8</code></pre>
+        </div>
+        <p>This output provides important information about the kernel:</p>
+        <hr class="p-rule--muted" />
+        <ul class="p-list--divided u-no-margin--bottom">
+          <li class="p-list__item has-bullet">
+            Canonical adds “<code>Ubuntu</code>” to the build number to indicate that this is an official build from the Ubuntu archive
+          </li>
+          <li class="p-list__item has-bullet">
+            Ubuntu kernel-release = <code>5.4.0-12.15-generic</code>
+            <ul class="p-list--divided u-no-margin--bottom">
+              <li class="p-list__item has-bullet">
+                kernel version is <code>5.4</code>, which is identical to upstream stable kernel version
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.0</code> is an obsolete parameter left over from older upstream kernel version naming practices
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-12</code> application binary interface (ABI) bump for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.15</code> upload number for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-generic</code> is kernel flavor parameter, where <code>-generic</code> is the default Ubuntu kernel flavor
+              </li>
+              <li class="p-list__item has-bullet">
+                Mainline kernel-version = <code>5.4.8</code>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <h2 id="kernel-and-os-releases">Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2 id="kernel-security">Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">Ubuntu SRU process</a>, and the Canonical <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3 id="general-availability-ga-and-variant-ubuntu-kernels">
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels for different hardware and workloads
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3 id="optimized-kernels">Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3 id="optimized-kernels-again">Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h2>Identifying a kernel</h2>
+        <p>The easiest way to determine the kernel you're running is to type</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code></pre>
+        </div>
+        <p>on the terminal. For example:</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code><br /><code>Ubuntu 5.4.0-12.15-generic 5.4.8</code></pre>
+        </div>
+        <p>This output provides important information about the kernel:</p>
+        <hr class="p-rule--muted" />
+        <ul class="p-list--divided u-no-margin--bottom">
+          <li class="p-list__item has-bullet">
+            Canonical adds “<code>Ubuntu</code>” to the build number to indicate that this is an official build from the Ubuntu archive
+          </li>
+          <li class="p-list__item has-bullet">
+            Ubuntu kernel-release = <code>5.4.0-12.15-generic</code>
+            <ul class="p-list--divided u-no-margin--bottom">
+              <li class="p-list__item has-bullet">
+                kernel version is <code>5.4</code>, which is identical to upstream stable kernel version
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.0</code> is an obsolete parameter left over from older upstream kernel version naming practices
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-12</code> application binary interface (ABI) bump for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.15</code> upload number for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-generic</code> is kernel flavor parameter, where <code>-generic</code> is the default Ubuntu kernel flavor
+              </li>
+              <li class="p-list__item has-bullet">
+                Mainline kernel-version = <code>5.4.8</code>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <h2 id="kernel-and-os-releases">Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2 id="kernel-security">Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">Ubuntu SRU process</a>, and the Canonical <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3 id="general-availability-ga-and-variant-ubuntu-kernels">
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3 id="optimized-kernels">Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3 id="optimized-kernels-again">Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h2 id="kernel-and-os-releases">Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2 id="kernel-security">Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">Ubuntu SRU process</a>, and the Canonical <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3 id="general-availability-ga-and-variant-ubuntu-kernels">
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3 id="optimized-kernels">Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3 id="optimized-kernels-again">Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+      </div>
+      <div class="grid-col-2 p-newsletter-signup--2-col">
+        <h3>Newsletter signup</h3>
+        <p>Get the latest Ubuntu news and updates in your inbox.</p>
+        <form action="https://ubuntu.com/marketo/submit"
+              method="post"
+              id="mktoForm_4960">
+          <label class="is-required" for="email">Work email:</label>
+          <input required=""
+                 id="email"
+                 name="email"
+                 maxlength="255"
+                 type="email"
+                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$" />
+          <label class="p-checkbox is-required">
+            <input required=""
+                   class="p-checkbox__input"
+                   value="yes"
+                   aria-labelledby="canonicalUpdatesOptIn"
+                   name="canonicalUpdatesOptIn"
+                   type="checkbox" />
+            <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical"s products and services.</span>
+          </label>
+          <p>
+            By submitting this form, I confirm that I have read and agree to <a href="#">Canonical"s Privacy Policy</a>.
+          </p>
+          <button type="submit" class="u-no-margin--bottom js-submit-button">Sign up</button>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <script>{% include "docs/examples/patterns/in-page-navigation/_in-page-navigation.js" %}</script>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/in-page-navigation/manual.html b/templates/docs/examples/patterns/in-page-navigation/manual.html
new file mode 100644
index 000000000..ead66e6ed
--- /dev/null
+++ b/templates/docs/examples/patterns/in-page-navigation/manual.html
@@ -0,0 +1,338 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_in-page-navigation.jinja" import vf_in_page_navigation %}
+
+{% block title %}In-page navigation / Manual{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+
+  {% set page_navigation_data = [
+    {
+      "id": "identifying-a-kernel",
+      "text": "Identifying a kernel"
+    },
+    {
+      "id": "kernel-and-os-releases",
+      "text": "Kernel and OS releases information"
+    },
+    {
+      "id": "kernel-security",
+      "text": "Kernel security",
+      "children": [
+        {
+          "id": "general-availability-ga-and-variant-ubuntu-kernels",
+          "text": "General Availability (GA) and variant Ubuntu kernels for different hardware and workloads"
+        },
+        {
+          "id": "optimized-kernels",
+          "text": "Optimized kernels"
+        },
+        {
+          "id": "optimized-kernels-again",
+          "text": "Optimized kernels again"
+        }
+      ]
+    }
+  ] %}
+
+  <section class="p-section--hero">
+    <div class="grid-row">
+      <div class="grid-col-6 grid-col-start-large-3">
+        <h1>What is the Linux kernel?</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="p-section">
+    <div class="grid-row">
+      <div class="grid-col-4 grid-col-start-large-3">
+        <h2>Identifying a kernel</h2>
+        <p>The easiest way to determine the kernel you're running is to type</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code></pre>
+        </div>
+        <p>on the terminal. For example:</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code><br /><code>Ubuntu 5.4.0-12.15-generic 5.4.8</code></pre>
+        </div>
+        <p>This output provides important information about the kernel:</p>
+        <hr class="p-rule--muted" />
+        <ul class="p-list--divided u-no-margin--bottom">
+          <li class="p-list__item has-bullet">
+            Canonical adds “<code>Ubuntu</code>” to the build number to indicate that this is an official build from the Ubuntu archive
+          </li>
+          <li class="p-list__item has-bullet">
+            Ubuntu kernel-release = <code>5.4.0-12.15-generic</code>
+            <ul class="p-list--divided u-no-margin--bottom">
+              <li class="p-list__item has-bullet">
+                kernel version is <code>5.4</code>, which is identical to upstream stable kernel version
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.0</code> is an obsolete parameter left over from older upstream kernel version naming practices
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-12</code> application binary interface (ABI) bump for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.15</code> upload number for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-generic</code> is kernel flavor parameter, where <code>-generic</code> is the default Ubuntu kernel flavor
+              </li>
+              <li class="p-list__item has-bullet">
+                Mainline kernel-version = <code>5.4.8</code>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <h2>Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2>Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3>
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3>Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3>Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+      </div>
+      <div class="grid-col-2 p-newsletter-signup--2-col">
+        <h3>Newsletter signup</h3>
+        <p>Get the latest Ubuntu news and updates in your inbox.</p>
+        <form action="https://ubuntu.com/marketo/submit"
+              method="post"
+              id="mktoForm_4960">
+          <label class="is-required" for="email">Work email:</label>
+          <input required=""
+                 id="email"
+                 name="email"
+                 maxlength="255"
+                 type="email"
+                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$" />
+          <label class="p-checkbox is-required">
+            <input required=""
+                   class="p-checkbox__input"
+                   value="yes"
+                   aria-labelledby="canonicalUpdatesOptIn"
+                   name="canonicalUpdatesOptIn"
+                   type="checkbox" />
+            <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
+          </label>
+          <p>
+            By submitting this form, I confirm that I have read and agree to <a href="#">Canonical's Privacy Policy</a>.
+          </p>
+          <button type="submit" class="u-no-margin--bottom js-submit-button">Sign up</button>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <section class="p-section">
+    <div class="grid-row">
+      <div class="grid-col-2 grid-col-medium-4 grid-col-small-4">
+        {{ vf_in_page_navigation(title="What is the Linux kernel?",
+                navigation_items=page_navigation_data,
+                scope="manual",
+                primary_heading="h2",
+                secondary_heading="h3") }}
+      </div>
+      <div class="grid-col-4">
+        <h2 id="identifying-a-kernel">Identifying a kernel</h2>
+        <p>The easiest way to determine the kernel you're running is to type</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code></pre>
+        </div>
+        <p>on the terminal. For example:</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code><br /><code>Ubuntu 5.4.0-12.15-generic 5.4.8</code></pre>
+        </div>
+        <p>This output provides important information about the kernel:</p>
+        <hr class="p-rule--muted" />
+        <ul class="p-list--divided u-no-margin--bottom">
+          <li class="p-list__item has-bullet">
+            Canonical adds “<code>Ubuntu</code>” to the build number to indicate that this is an official build from the Ubuntu archive
+          </li>
+          <li class="p-list__item has-bullet">
+            Ubuntu kernel-release = <code>5.4.0-12.15-generic</code>
+            <ul class="p-list--divided u-no-margin--bottom">
+              <li class="p-list__item has-bullet">
+                kernel version is <code>5.4</code>, which is identical to upstream stable kernel version
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.0</code> is an obsolete parameter left over from older upstream kernel version naming practices
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-12</code> application binary interface (ABI) bump for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.15</code> upload number for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-generic</code> is kernel flavor parameter, where <code>-generic</code> is the default Ubuntu kernel flavor
+              </li>
+              <li class="p-list__item has-bullet">
+                Mainline kernel-version = <code>5.4.8</code>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <h2 id="kernel-and-os-releases">Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2 id="kernel-security">Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3 id="general-availability-ga-and-variant-ubuntu-kernels">
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels for different hardware and workloads
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3 id="optimized-kernels">Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3 id="optimized-kernels-again">Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section class="p-section">
+    <div class="grid-row">
+      <div class="grid-col-2 grid-col-medium-4 grid-col-small-4"></div>
+      <div class="grid-col-4">
+        <h2>Identifying a kernel</h2>
+        <p>The easiest way to determine the kernel you're running is to type</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code></pre>
+        </div>
+        <p>on the terminal. For example:</p>
+        <div class="p-code-snippet">
+          <pre class="p-code-snippet__block--icon is-wrapped"><code>cat /proc/version_signature</code><br /><code>Ubuntu 5.4.0-12.15-generic 5.4.8</code></pre>
+        </div>
+        <p>This output provides important information about the kernel:</p>
+        <hr class="p-rule--muted" />
+        <ul class="p-list--divided u-no-margin--bottom">
+          <li class="p-list__item has-bullet">
+            Canonical adds “<code>Ubuntu</code>” to the build number to indicate that this is an official build from the Ubuntu archive
+          </li>
+          <li class="p-list__item has-bullet">
+            Ubuntu kernel-release = <code>5.4.0-12.15-generic</code>
+            <ul class="p-list--divided u-no-margin--bottom">
+              <li class="p-list__item has-bullet">
+                kernel version is <code>5.4</code>, which is identical to upstream stable kernel version
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.0</code> is an obsolete parameter left over from older upstream kernel version naming practices
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-12</code> application binary interface (ABI) bump for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>.15</code> upload number for this kernel
+              </li>
+              <li class="p-list__item has-bullet">
+                <code>-generic</code> is kernel flavor parameter, where <code>-generic</code> is the default Ubuntu kernel flavor
+              </li>
+              <li class="p-list__item has-bullet">
+                Mainline kernel-version = <code>5.4.8</code>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <h2>Kernel and OS releases</h2>
+        <p>
+          Canonical provides long-term support (LTS) kernels for <a href="#">Ubuntu LTS releases</a>. Canonical also provides interim operating system releases with updated kernels every 6 months.
+        </p>
+        <p>
+          For customers and business partners that don't have specialized bleeding-edge workloads or latest hardware needs, the latest  LTS release “-generic” kernel is the best option for them such as the 4.15 default kernel in Ubuntu 18.04 LTS. Customers who need the latest hardware support capability can install the latest HWE kernel such as the ones contained in interim releases, keeping in mind the shorter support lifespan associated with these kernels (9 months). HWE kernel customers are recommended to upgrade to a newer LTS release that supports their hardware and/or software needs as soon as it is available. Another option for customers is to use point releases. For example, there is an 18.04.4 point release as of February 2020, which includes an updated 5.3.x kernel but is also considered LTS, exactly like the original GA 4.15 kernel in 18.04.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about the Ubuntu kernel support lifecycle&nbsp;›</a>
+        </div>
+        <h2>Kernel security</h2>
+        <p>
+          The Canonical Kernel Team's primary focus is the careful maintenance of kernels and their variants for regular delivery via the <a href="#">livepatch service</a>. This includes rigorous management of Common Vulnerabilities and Exposures (CVEs) assigned to the Linux kernel and application of relevant patches for all critical and serious kernel defects and then rigorously testing newly updated kernels end-to-end each SRU cycle.
+        </p>
+        <h3>
+          General Availability (GA) and
+          <br class="u-hide--small" />
+          variant Ubuntu kernels
+        </h3>
+        <p>
+          The complete functionality of any given kernel is determined by the included modules and the kernel configuration for both hardware and the expected workloads that are run on it.
+        </p>
+        <p>
+          Kernel modules are binary programs that extend a kernel's ability to control the computing system's hardware or add additional system capabilities like high-performance networking or non-standard graphics, etc.   The GA kernel that is shipped by default, with the Canonical Ubuntu Long Term Support (LTS) and Hardware Enablement (HWE) releases, are tuned for stable, reliable, secure, high-performance operation over a wide variety of hardware platforms and workloads.
+        </p>
+        <p>
+          A kernel variant is a kernel that deviates from the generic GA kernel by changes to its configuration, and/or by having modules added and/or removed.
+        </p>
+        <div class="p-cta-block">
+          <a href="#">Learn more about Ubuntu kernel variants from Canonical&nbsp;›</a>
+        </div>
+        <h3>Optimized kernels</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+        <h3>Optimized kernels again</h3>
+        <p>
+          Canonical advocates for customers to use the GA kernel shipped with Ubuntu as the best and most cost-effective option in their business environment. We also offer the option for customers to customize their own Ubuntu kernels. Several of our enterprise, Telco and cloud provider customers have systems and workload needs, which justify both the time investment to optimize their kernels and the pay to develop and maintain those optimized kernels over time.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <script>{% include "docs/examples/patterns/in-page-navigation/_in-page-navigation.js" %}</script>
+{% endblock %}
diff --git a/templates/docs/patterns/in-page-navigation/index.md b/templates/docs/patterns/in-page-navigation/index.md
new file mode 100644
index 000000000..de3bc2e83
--- /dev/null
+++ b/templates/docs/patterns/in-page-navigation/index.md
@@ -0,0 +1,241 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: In-page navigation | Patterns
+---
+
+{% from "docs/macros/patterns/wip-notice.jinja" import pattern_wip_notice %}
+{% from "docs/macros/notice.jinja" import documentation_notice %}
+
+{{- pattern_wip_notice() }}
+
+{{- documentation_notice("p-notification--information", "A note on usage", "This component can not be used as a standalone section. It must be used within the default grid, with a grid column variant (preferably `grid-col-2`) as its direct parent.") }}
+
+A component that generates a table of contents to be embedded within the page. It accepts a dictionary of heading names and IDs when in 'manual' mode but can also be used in 'full-page' mode to auto-generate them (_this requires the associated JS_).
+
+Clicking the links will take you to that heading in the page. The navigation also highlights the current position you are in the page.
+
+For the correct navigation item to be highlighted, the associate JS is required. It is also required to auto generate the navigation in 'full-page' mode.
+
+The in-page navigation component is composed of the following elements:
+
+| Element           | Description                                                    |
+| ----------------- | -------------------------------------------------------------- |
+| title             | Optional title above the navigation                            |
+| navigation_items  | A dictionary of the heading names, IDs                         |
+| scope             | Whether the navigation will be manual built or generated by JS |
+| primary_heading   | The level of the primary headings ('h2' or 'h3')               |
+| secondary_heading | The level of the secondary headings ('h3' or 'h4')             |
+| excludes          | An optional list of headings to ignore                         |
+
+## Manual
+
+The navigation is always expected to be used within the grid (whether in "manual" or "full-page" mode). It should have a grid column as a direct parent and preferably be in 2 columns on large screens, and 4 columns on medium and small screens.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/in-page-navigation/component" class="js-example" data-lang="jinja">
+View example of the in-page navigation component in 'full-page' mode
+</a></div>
+
+## Manual with optional heading
+
+There is an option to add a heading on top of the in-page navigation component, which can be helpful in cases where the in-page navigation targets a specific section, not the entire page.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/in-page-navigation/component-with-optional-heading" class="js-example" data-lang="jinja">
+View example of the in-page navigation component in 'full-page' mode
+</a></div>
+
+## In page examples
+
+This is an example of "full-page" mode with mock content. The navigation has been auto-generated:
+
+<a href="/docs/examples/patterns/in-page-navigation/full-page">Full-page mode example with mock content</a>
+
+This is an example of "manual" mode, where a dictionary of headings was passed to the Jinja macro. In this instance it is found half way down the page:
+
+<a href="/docs/examples/patterns/in-page-navigation/manual">Manual mode example with mock content</a>
+
+## Jinja Macro
+
+The `vf_in_page_navigation` Jinja macro can be used to generate an in-page navigation. The API for the macro is shown
+below.
+
+### Parameters
+
+<div style="overflow: auto;">
+  <table>
+    <thead>
+      <tr>
+        <th style="width: 220px;">Name</th>
+        <th style="width: 160px;">Required?</th>
+        <th style="width: 160px;">Type</th>
+        <th style="width: 160px;">Default</th>
+        <th style="width: 250px;">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <code>title</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>String</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          The title of the in-page navigation
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>navigation_items</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>Object</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          The navigation represented as an object. The hierarchy and order of the navigation should be reflected in the object to a maximum of 2 levels deep.
+        </td>
+      </tr>      
+      <tr>
+        <td>
+          <code>navigation_items{}.text</code>
+        </td>
+        <td>
+          Yes (if passing `navigation_items`)
+        </td>
+        <td>
+          <code>String</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          The title as it will appear in the navigation
+      </tr>
+      <tr>
+        <td>
+          <code>navigation_items{}.id</code>
+        </td>
+        <td>
+          Yes (if passing `navigation_items`)
+        </td>
+        <td>
+          <code>String</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          The ID of the target heading
+        </td>
+      </tr>
+      <tr>
+        <td>
+          One of:
+          <code>"full-page"</code>, <code>"manual"</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>String</code>
+        </td>
+        <td>
+          <code>"full-page"</code>
+        </td>
+        <td>
+          <strong>"full-page"</strong> - Automatically generates the in-page navigation and attaches heading IDs. Max 1 navigation per page. Requires associated JS.<br>
+          <strong>"manual"</strong> - Requires passing `navigation_items` dictionary. No limit on number of navigations per page.
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>primary_heading</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          One of:
+          <code>"h2"</code>, <code>"h3"</code>
+        </td>
+        <td>
+          <code>"h2"</code>
+        </td>
+        <td>
+          The top level heading that is searched for when auto-generating the navigation. Limited to h2 & h3.
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>secondary_heading</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          One of:
+          <code>"h3"</code>, <code>"h4"</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          The second level heading that is searched for when auto-generating the navigation. Should follow `primary_heading` numerically for semantic correctness i.e. "h2" -> "h3".
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>excludes</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>Array&lt;String&gt;</code>
+        </td>
+        <td>
+          <code>[]</code>
+        </td>
+        <td>
+          Array of headings to exclude from the navigation, supports two formats:<br>
+          <strong>CSS selector</strong> (e.g. "#some-id", ".some-class") - Matches based on css selectors<br>
+          <strong>Text match</strong> (e.g. "text:Newsletter") - Matches based on text content of headings. Must be prepended with `text:`.<br>
+          <strong>Example</strong>: `["#some-id", "text:Newsletter"]`
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Import
+
+### Jinja Macro
+
+To import the Basic Section Jinja macro, copy the following import statement into your
+Jinja template.
+
+```jinja
+{% raw -%}
+{% from "_macros/vf_in-page-navigation.jinja" import vf_in_page_navigation %}
+{%- endraw -%}
+```
+
+View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros)
+for macro installation instructions.
+
+### SCSS
+
+Since Patterns leverage many other parts of Vanilla in their composition and content, we
+recommend [importing the entirety of Vanilla](/docs#install) for full support.
diff --git a/tests/parker.js b/tests/parker.js
index 206112889..2ca2135ad 100644
--- a/tests/parker.js
+++ b/tests/parker.js
@@ -12,7 +12,7 @@ function generateMetrics(file, metricsArray) {
     {
       name: 'Stylesheet size',
       benchmark: 150000,
-      threshold: 522850,
+      threshold: 532480,
       result: results['total-stylesheet-size'],
     },
     {