diff --git a/.changeset/proud-wasps-travel.md b/.changeset/proud-wasps-travel.md
new file mode 100644
index 0000000000..4df118858f
--- /dev/null
+++ b/.changeset/proud-wasps-travel.md
@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": patch
+---
+
+fix(navigation): make vertical navigation more accessible
+
+BREAKING CHANGES:
+* Navigation markup has been updated
+* Svelte NavigationTitle component has been renamed to NavigationGroup 
diff --git a/packages/stacks-classic/lib/components/navigation/navigation.a11y.test.ts b/packages/stacks-classic/lib/components/navigation/navigation.a11y.test.ts
index 23af1a8741..eb92922df2 100644
--- a/packages/stacks-classic/lib/components/navigation/navigation.a11y.test.ts
+++ b/packages/stacks-classic/lib/components/navigation/navigation.a11y.test.ts
@@ -2,7 +2,14 @@ import { html } from "@open-wc/testing";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
-const items = [
+interface NavigationItem {
+    label: string;
+    title?: boolean;
+    selected?: boolean;
+    dropdown?: boolean;
+}
+
+const items: NavigationItem[] = [
     {
         label: "Group 1",
         title: true,
@@ -38,20 +45,43 @@ const items = [
     },
 ];
 
-const getChildren = (includeTitles = false): string =>
-    items
-        .map((item) => {
+const getChildren = (includeTitles = false): string => {
+    const getClasses = function (item: NavigationItem) {
+        return `s-navigation--item${
+            item.selected ? " is-selected" : ""
+        }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
+    };
+
+    if (!includeTitles) {
+        return items
+            .map((item) => {
+                if (item.title) {
+                    return ""; //don't print title
+                }
+                return `<li><a href="#" class="${getClasses(item)}">${item.label}</a></li>`;
+            })
+            .join("");
+    } else {
+        //Vertical nav
+        let html = "";
+        for (const item of items) {
             if (item.title) {
-                return includeTitles
-                    ? `<li class="s-navigation--title">${item.label}</li>`
-                    : "";
+                if (html.length > 0) {
+                    html += "</ul></li>";
+                }
+                const groupName = item.label.replace(" ", "");
+                html += `<li>
+                <h4 class="s-navigation--title" id="nav-${groupName}">${item.label}</h4>
+                <ul aria-labelledby="nav-${groupName}">
+                `;
+            } else {
+                html += `<li><a href="#" class="${getClasses(item)}">${item.label}</a></li>`;
             }
-            const classes = `s-navigation--item${
-                item.selected ? " is-selected" : ""
-            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
-            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
-        })
-        .join("");
+        }
+        html += "</ul></li>";
+        return html;
+    }
+};
 
 describe("navigation", () => {
     runA11yTests({
diff --git a/packages/stacks-classic/lib/components/navigation/navigation.less b/packages/stacks-classic/lib/components/navigation/navigation.less
index 24e07ad0d2..2bfcb816c8 100644
--- a/packages/stacks-classic/lib/components/navigation/navigation.less
+++ b/packages/stacks-classic/lib/components/navigation/navigation.less
@@ -1,4 +1,5 @@
-.s-navigation {
+.s-navigation,
+.s-navigation ul {
     --_na-fd: row;
     --_na-fw: wrap;
     --_na-p: var(--su2) 0;
@@ -15,7 +16,6 @@
     --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
     --_na-item-selected-h: var(--su2);
     --_na-item-text-ta: center;
-    --_na-title-mt: var(--su24);
     --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
     --_na-after-bg-color: var(--black-400);
 
@@ -42,7 +42,8 @@
         --_na-item-p: var(--su6) var(--su4);
     }
 
-    &&__vertical {
+    &&__vertical,
+    &&__vertical ul {
         --_na-fd: column;
         --_na-gap: 0;
         --_na-p: 0;
@@ -51,6 +52,7 @@
         --_na-item-selected-h: 0;
         --_na-item-p: var(--su6) var(--su8);
         --_na-item-fc: var(--black-600);
+        
         & .s-navigation--item {
             &.is-selected {
                 --_na-item-bg: var(--black-150);
@@ -151,20 +153,22 @@
     }
 
     & &--title {
-        &:first-child {
-            --_na-title-mt: 0;
-        }
-
         & .s-btn {
             color: var(--black-400);
         }
 
-        margin-top: var(--_na-title-mt);
+        margin-bottom: 0;
         font-size: var(--fs-fine);
+        font-weight: normal;
         color: var(--black-400);
         padding: calc(var(--su16) + var(--su2)) var(--su8);
     }
 
+    //Add top margin to titles except the first one
+    & > li ~ li .s-navigation--title {
+        margin-top: var(--su24);
+    }
+
     & &--icon {
         color: inherit;
         margin-right: var(--su4);
diff --git a/packages/stacks-classic/lib/components/navigation/navigation.visual.test.ts b/packages/stacks-classic/lib/components/navigation/navigation.visual.test.ts
index 38285937e3..3d0520e54c 100644
--- a/packages/stacks-classic/lib/components/navigation/navigation.visual.test.ts
+++ b/packages/stacks-classic/lib/components/navigation/navigation.visual.test.ts
@@ -9,7 +9,14 @@ const filledIcon = IconHomeFill.replace(
     'class="s-navigation--icon '
 );
 
-const items = [
+interface NavigationItem {
+    label: string;
+    title?: boolean;
+    selected?: boolean;
+    dropdown?: boolean;
+}
+
+const items: NavigationItem[] = [
     {
         label: "Group 1",
         title: true,
@@ -45,25 +52,47 @@ const items = [
     },
 ];
 
-const getChildren = (includeTitles = false, includeIcons = false): string =>
-    items
-        .map((item) => {
+const getChildren = (includeTitles = false, includeIcons = false): string => {
+    const getClasses = function (item: NavigationItem) {
+        return `s-navigation--item${
+            item.selected ? " is-selected" : ""
+        }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
+    };
+
+    const getIcon = function (item: NavigationItem) {
+        return includeIcons ? (item.selected ? filledIcon : outlineIcon) : "";
+    };
+
+    if (!includeTitles) {
+        return items
+            .map((item) => {
+                if (item.title) {
+                    return ""; //don't print title
+                }
+                return `<li><a href="#" class="${getClasses(item)}">${getIcon(item)}${item.label}</a></li>`;
+            })
+            .join("");
+    } else {
+        //Vertical nav
+        let html = "";
+        for (const item of items) {
             if (item.title) {
-                return includeTitles
-                    ? `<li class="s-navigation--title">${item.label}</li>`
-                    : "";
+                if (html.length > 0) {
+                    html += "</ul></li>";
+                }
+                const groupName = item.label.replace(" ", "");
+                html += `<li>
+                <h4 class="s-navigation--title" id="nav-${groupName}">${item.label}</h4>
+                <ul aria-labelledby="nav-${groupName}">
+                `;
+            } else {
+                html += `<li><a href="#" class="${getClasses(item)}">${getIcon(item)}${item.label}</a></li>`;
             }
-            const icon = includeIcons
-                ? item.selected
-                    ? filledIcon
-                    : outlineIcon
-                : "";
-            const classes = `s-navigation--item${
-                item.selected ? " is-selected" : ""
-            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
-            return `<li><a href="#" class="${classes}">${icon}${item.label}</a></li>`;
-        })
-        .join("");
+        }
+        html += "</ul></li>";
+        return html;
+    }
+};
 
 describe("navigation", () => {
     runVisualTests({
diff --git a/packages/stacks-docs/_includes/layouts/home.html b/packages/stacks-docs/_includes/layouts/home.html
index 40e3194b91..46351c20bc 100644
--- a/packages/stacks-docs/_includes/layouts/home.html
+++ b/packages/stacks-docs/_includes/layouts/home.html
@@ -202,11 +202,11 @@ <h1 class="fw-bold mln2 mb0 mtn4 fs-display1 lh-xs">Stacks</h1>
     <div class="bg-black-100 ai-center d-flex fd-column jc-center w100">
         <nav class="d-grid grid__2 fs-body2 g16 px64 py32 w100 wmx12 lg:px32 md:py24 sm:grid__1 sm:g8 sm:p24" aria-label="Global">
             {% for card in home.cards %}
-                <a class="s-card ai-center d-flex g32 p16" href="{{ card.url }}">
+                <a class="s-card s-link ai-center d-flex g32 p16" href="{{ card.url }}">
                     {% spot card.spot, "native h96 w96 sm:d-none" %}
                     <div class="fl-grow1 w75">
-                        <div class="fw-bold fs-headline1 mb2">{{ card.title }}</div>
-                        <div class="fs-body3 fc-medium">{{ card.description }}</div>
+                        <h2 class="fw-bold fs-headline1 mb2">{{ card.title }}</h2>
+                        <span class="fs-body3 fc-medium">{{ card.description }}</span>
                     </div>
                 </a>
             {% endfor %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html
index e0afc170af..e46eb813cf 100644
--- a/packages/stacks-docs/product/components/navigation.html
+++ b/packages/stacks-docs/product/components/navigation.html
@@ -607,43 +607,51 @@
 {% highlight html %}
 <nav aria-label="…">
     <ul class="s-navigation s-navigation__vertical">
-        <li class="s-navigation--title">…</li>
         <li>
-            <a href="…" class="s-navigation--item is-selected">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
-        </li>
-        <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
+            <h4 class="s-navigation--title" id="nav-section1">…</h4>
+            <ul aria-labelledby="nav-section1">
+                <li>
+                    <a href="…" class="s-navigation--item is-selected">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+            </ul>
         </li>
 
-        <li class="s-navigation--title">…</li>
-        <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
-        </li>
-        <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
-        </li>
-        <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
-        </li>
         <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
-        </li>
-        <li>
-            <a href="…" class="s-navigation--item">
-                <span class="s-navigation--item-text" data-text="…">…</span>
-            </a>
+            <h4 class="s-navigation--title" id="nav-section2">…</h4>
+            <ul aria-labelledby="nav-section2">
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+            </ul>
         </li>
     </ul>
 </nav>
@@ -651,35 +659,42 @@
         <div class="docs-preview--example">
             <nav class="ws2" aria-label="titles navigation">
                 <ul class="s-navigation s-navigation__vertical">
-                    <li class="s-navigation--title">Resources</li>
-                    <li><a href="#" class="s-navigation--item is-selected">Icons</a></li>
-                    <li><a href="#" class="s-navigation--item">Spot illustrations</a></li>
-
-                    <li class="s-navigation--title">Base</li>
-                    <li>
-                        <a href="#" class="s-navigation--item is-selected">
-                            {% icon "HomeFill", "s-navigation--icon" %}
-                            <span class="s-navigation--item-text" data-text="Home">Home</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#" class="s-navigation--item">
-                            {% icon "Jobs", "s-navigation--icon" %}
-                            <span class="s-navigation--item-text" data-text="Jobs">Jobs</span>
-                        </a>
-                    </li>
                     <li>
-                        <a href="#" class="s-navigation--item">
-                            {% icon "Bookmark", "s-navigation--icon" %}
-                            <span class="s-navigation--item-text" data-text="Saves">Saves</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#" class="s-navigation--item">
-                            {% icon "UserStack", "s-navigation--icon" %}
-                            <span class="s-navigation--item-text" data-text="Users">Users</span>
-                        </a>
-                    </li>
+                        <h4 class="s-navigation--title" id="nav-resources">Resources</h4>
+                        <ul aria-labelledby="nav-resources">
+                            <li><a href="#" class="s-navigation--item is-selected">Icons</a></li>
+                            <li><a href="#" class="s-navigation--item">Spot illustrations</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h4 class="s-navigation--title" id="nav-base">Base</h4>
+                        <ul aria-labelledby="nav-base">
+                            <li>
+                                <a href="#" class="s-navigation--item is-selected">
+                                    {% icon "HomeFill", "s-navigation--icon" %}
+                                    <span class="s-navigation--item-text" data-text="Home">Home</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="s-navigation--item">
+                                    {% icon "Jobs", "s-navigation--icon" %}
+                                    <span class="s-navigation--item-text" data-text="Jobs">Jobs</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="s-navigation--item">
+                                    {% icon "Bookmark", "s-navigation--icon" %}
+                                    <span class="s-navigation--item-text" data-text="Saves">Saves</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="s-navigation--item">
+                                    {% icon "UserStack", "s-navigation--icon" %}
+                                    <span class="s-navigation--item-text" data-text="Users">Users</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>                    
                 </ul>
             </nav>
         </div>
diff --git a/packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte b/packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte
index 5f971db800..5d8cd9c4f7 100644
--- a/packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte
+++ b/packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte
@@ -2,7 +2,7 @@
     import { defineMeta } from "@storybook/addon-svelte-csf";
     import Navigation from "./Navigation.svelte";
     import NavigationItem from "./NavigationItem.svelte";
-    import NavigationTitle from "./NavigationTitle.svelte";
+    import NavigationGroup from "./NavigationGroup.svelte";
     import Icon from "../Icon/Icon.svelte";
     import Button from "../Button/Button.svelte";
     import ActivityIndicator from "../ActivityIndicator/ActivityIndicator.svelte";
@@ -46,7 +46,7 @@
         title: "Components/Navigation",
         component: Navigation,
         // @ts-expect-error: subcomponents is not typed correctly - see related issue https://github.com/storybookjs/storybook/issues/23170
-        subcomponents: { NavigationItem, NavigationTitle },
+        subcomponents: { NavigationItem, NavigationGroup },
     });
 
     const horizontalItems = [
@@ -282,22 +282,24 @@
 
 <Story name="Titles" asChild>
     <Navigation class="ws2" label="Titles" orientation="vertical">
-        <NavigationTitle title="Group 1" />
-        {#each ["Label 1", "Label 2", "Label 3"] as label (label)}
-            <NavigationItem
-                text={label}
-                selected={base === label}
-                onclick={() => (base = label)}
-            />
-        {/each}
-        <NavigationTitle title="Group 2" />
-        {#each ["Label 4", "Label 5", "Label 6"] as label (label)}
-            <NavigationItem
-                text={label}
-                selected={base === label}
-                onclick={() => (base = label)}
-            />
-        {/each}
+        <NavigationGroup title="Group 1">
+            {#each ["Label 1", "Label 2", "Label 3"] as label (label)}
+                <NavigationItem
+                    text={label}
+                    selected={base === label}
+                    onclick={() => (base = label)}
+                />
+            {/each}
+        </NavigationGroup>
+        <NavigationGroup title="Group 2">
+            {#each ["Label 4", "Label 5", "Label 6"] as label (label)}
+                <NavigationItem
+                    text={label}
+                    selected={base === label}
+                    onclick={() => (base = label)}
+                />
+            {/each}
+        </NavigationGroup>
     </Navigation>
 </Story>
 
@@ -319,7 +321,11 @@
 </Story>
 
 <Story name="Trailing" asChild>
-    <Navigation class="ws2 hs6" label="Trailing" orientation="vertical">
+    <Navigation
+        class="ws2 hs6 overflow-y-auto"
+        label="Trailing"
+        orientation="vertical"
+    >
         <NavigationItem
             text="Home"
             icon={IconHome}
@@ -346,9 +352,10 @@
             {@const selectedItem = groupItems.find(
                 (item) => tSelected === item.text
             )}
-            <NavigationTitle
+            <NavigationGroup
                 title={group}
-                class={`bc-black-200 bt ps-relative ${isCollapsed && !selectedItem ? "mbn24" : ""}`}
+                class={`ps-relative ${isCollapsed && !selectedItem ? "mbn24" : ""}`}
+                titleClass="bt bc-black-200 "
             >
                 {#snippet trailing()}
                     <div class="ps-absolute r0 as-center d-flex ai-center">
@@ -385,76 +392,77 @@
                         </Button>
                     </div>
                 {/snippet}
-            </NavigationTitle>
-
-            {@const selectedIndex = groupItems.findIndex(
-                (item) => tSelected === item.text
-            )}
-            {@const itemsBefore =
-                selectedIndex >= 0
-                    ? groupItems.slice(0, selectedIndex)
-                    : groupItems}
-            {@const itemsAfter =
-                selectedIndex >= 0 ? groupItems.slice(selectedIndex + 1) : []}
+                {@const selectedIndex = groupItems.findIndex(
+                    (item) => tSelected === item.text
+                )}
+                {@const itemsBefore =
+                    selectedIndex >= 0
+                        ? groupItems.slice(0, selectedIndex)
+                        : groupItems}
+                {@const itemsAfter =
+                    selectedIndex >= 0
+                        ? groupItems.slice(selectedIndex + 1)
+                        : []}
 
-            {#each itemsBefore as item (item.text)}
-                {#if !isCollapsed}
-                    <NavigationItem
-                        icon={item.icon}
-                        iconSelected={item.iconSelected}
-                        text={item.text}
-                        onclick={() => (tSelected = item.text)}
-                        animate
-                    >
-                        {#snippet trailing()}
-                            {#if item.activity}
-                                <ActivityIndicator
-                                    content={item.activity.content}
-                                    label={item.activity.label}
-                                />
-                            {/if}
-                        {/snippet}
-                    </NavigationItem>
-                {/if}
-            {/each}
-            {#if selectedItem}
-                <NavigationItem
-                    icon={selectedItem.icon}
-                    iconSelected={selectedItem.iconSelected}
-                    text={selectedItem.text}
-                    selected
-                    onclick={() => (tSelected = selectedItem.text)}
-                >
-                    {#snippet trailing()}
-                        {#if selectedItem.activity}
-                            <ActivityIndicator
-                                content={selectedItem.activity.content}
-                                label={selectedItem.activity.label}
-                            />
-                        {/if}
-                    {/snippet}
-                </NavigationItem>
-            {/if}
-            {#each itemsAfter as item (item.text)}
-                {#if !isCollapsed}
+                {#each itemsBefore as item (item.text)}
+                    {#if !isCollapsed}
+                        <NavigationItem
+                            icon={item.icon}
+                            iconSelected={item.iconSelected}
+                            text={item.text}
+                            onclick={() => (tSelected = item.text)}
+                            animate
+                        >
+                            {#snippet trailing()}
+                                {#if item.activity}
+                                    <ActivityIndicator
+                                        content={item.activity.content}
+                                        label={item.activity.label}
+                                    />
+                                {/if}
+                            {/snippet}
+                        </NavigationItem>
+                    {/if}
+                {/each}
+                {#if selectedItem}
                     <NavigationItem
-                        icon={item.icon}
-                        iconSelected={item.iconSelected}
-                        text={item.text}
-                        onclick={() => (tSelected = item.text)}
-                        animate
+                        icon={selectedItem.icon}
+                        iconSelected={selectedItem.iconSelected}
+                        text={selectedItem.text}
+                        selected
+                        onclick={() => (tSelected = selectedItem.text)}
                     >
                         {#snippet trailing()}
-                            {#if item.activity}
+                            {#if selectedItem.activity}
                                 <ActivityIndicator
-                                    content={item.activity.content}
-                                    label={item.activity.label}
+                                    content={selectedItem.activity.content}
+                                    label={selectedItem.activity.label}
                                 />
                             {/if}
                         {/snippet}
                     </NavigationItem>
                 {/if}
-            {/each}
+                {#each itemsAfter as item (item.text)}
+                    {#if !isCollapsed}
+                        <NavigationItem
+                            icon={item.icon}
+                            iconSelected={item.iconSelected}
+                            text={item.text}
+                            onclick={() => (tSelected = item.text)}
+                            animate
+                        >
+                            {#snippet trailing()}
+                                {#if item.activity}
+                                    <ActivityIndicator
+                                        content={item.activity.content}
+                                        label={item.activity.label}
+                                    />
+                                {/if}
+                            {/snippet}
+                        </NavigationItem>
+                    {/if}
+                {/each}
+            </NavigationGroup>
         {/each}
     </Navigation>
 </Story>
diff --git a/packages/stacks-svelte/src/components/Navigation/Navigation.svelte b/packages/stacks-svelte/src/components/Navigation/Navigation.svelte
index 251edaf3b9..b5ddf6e098 100644
--- a/packages/stacks-svelte/src/components/Navigation/Navigation.svelte
+++ b/packages/stacks-svelte/src/components/Navigation/Navigation.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
 
     type Orientation = "horizontal" | "vertical";
     type Overflow = "wrap" | "scroll";
@@ -22,9 +23,13 @@
          */
         size?: "" | "sm";
         /**
-         * Additional CSS classes added to the navigation list element
+         * Additional CSS classes added to the outer navigation element
          */
-        class?: string;
+        class?: ClassValue;
+        /**
+         * Additional CSS classes added to the inner list element
+         */
+        listClass?: ClassValue;
         /**
          * Snippet for the navigation children
          */
@@ -36,10 +41,10 @@
         overflow = "wrap",
         size = "",
         class: className = "",
+        listClass = "",
         children,
     }: Props = $props();
     const getClasses = (
-        className: string,
         orientation: Orientation,
         overflow: Overflow,
         size: Size
@@ -55,18 +60,13 @@
         if (size) {
             classes += ` ${base}__${size}`;
         }
-        if (className) {
-            classes += ` ${className}`;
-        }
         return classes;
     };
-    const classes = $derived(
-        getClasses(className, orientation, overflow, size)
-    );
+    const classes = $derived(getClasses(orientation, overflow, size));
 </script>
 
-<nav aria-label={label}>
-    <ul class={classes}>
+<nav aria-label={label} class={className}>
+    <ul class={[listClass, classes]}>
         {@render children()}
     </ul>
 </nav>
diff --git a/packages/stacks-svelte/src/components/Navigation/Navigation.test.ts b/packages/stacks-svelte/src/components/Navigation/Navigation.test.ts
index ca474eca13..be84d935da 100644
--- a/packages/stacks-svelte/src/components/Navigation/Navigation.test.ts
+++ b/packages/stacks-svelte/src/components/Navigation/Navigation.test.ts
@@ -17,7 +17,7 @@ import { createSvelteComponentsSnippet } from "../../../test-utils";
 
 import Navigation from "./Navigation.svelte";
 import NavigationItem from "./NavigationItem.svelte";
-import NavigationTitle from "./NavigationTitle.svelte";
+import NavigationGroup from "./NavigationGroup.svelte";
 
 describe("Navigation", () => {
     it("should render navigation with multiple items and handle selection with links", async () => {
@@ -228,40 +228,44 @@ describe("Navigation", () => {
                 orientation: "vertical",
                 children: createSvelteComponentsSnippet([
                     {
-                        component: NavigationTitle,
+                        component: NavigationGroup,
                         props: {
                             title: "Group 1",
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: NavigationItem,
+                                    props: {
+                                        text: "Item 1",
+                                        selected: true,
+                                    },
+                                },
+                            ]),
                         },
                     },
                     {
-                        component: NavigationItem,
-                        props: {
-                            text: "Item 1",
-                            selected: true,
-                        },
-                    },
-                    {
-                        component: NavigationTitle,
+                        component: NavigationGroup,
                         props: {
                             title: "Group 2",
-                        },
-                    },
-                    {
-                        component: NavigationItem,
-                        props: {
-                            text: "Item 2",
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: NavigationItem,
+                                    props: {
+                                        text: "Item 2",
+                                        selected: true,
+                                    },
+                                },
+                            ]),
                         },
                     },
                 ]),
             },
         });
 
-        // TODO: is role separator semantically correct here? should titles be heading instead?
-        const separators = screen.getAllByRole("separator");
+        const separators = screen.getAllByRole("heading");
         expect(separators.length).to.equal(2);
 
-        expect(separators[0]).to.have.text("Group 1 ");
-        expect(separators[1]).to.have.text("Group 2 ");
+        expect(separators[0]).to.have.text("Group 1");
+        expect(separators[1]).to.have.text("Group 2");
     });
 
     it("should render navigation items and navigation titles with trailing content", () => {
@@ -271,24 +275,26 @@ describe("Navigation", () => {
                 orientation: "vertical",
                 children: createSvelteComponentsSnippet([
                     {
-                        component: NavigationTitle,
+                        component: NavigationGroup,
                         props: {
                             title: "Title",
                             trailing: createRawSnippet(() => ({
                                 render: () => "<button>Toggle</button>",
                             })),
-                        },
-                    },
-                    {
-                        component: NavigationItem,
-                        props: {
-                            text: "Home",
-                            icon: IconHome,
-                            iconSelected: IconHomeFill,
-                            selected: true,
-                            trailing: createRawSnippet(() => ({
-                                render: () => "<span>New</span>",
-                            })),
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: NavigationItem,
+                                    props: {
+                                        text: "Home",
+                                        icon: IconHome,
+                                        iconSelected: IconHomeFill,
+                                        selected: true,
+                                        trailing: createRawSnippet(() => ({
+                                            render: () => "<span>New</span>",
+                                        })),
+                                    },
+                                },
+                            ]),
                         },
                     },
                 ]),
@@ -378,29 +384,31 @@ describe("Navigation", () => {
                 class: "custom-nav-class",
                 children: createSvelteComponentsSnippet([
                     {
-                        component: NavigationTitle,
+                        component: NavigationGroup,
                         props: {
                             title: "Title",
-                            class: "custom-title-class",
-                        },
-                    },
-                    {
-                        component: NavigationItem,
-                        props: {
-                            text: "Item",
-                            class: "custom-item-class",
-                            selected: true,
+                            titleClass: "custom-title-class",
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: NavigationItem,
+                                    props: {
+                                        text: "Item",
+                                        class: "custom-item-class",
+                                        selected: true,
+                                    },
+                                },
+                            ]),
                         },
                     },
                 ]),
             },
         });
 
-        const list = screen.getByRole("list");
-        expect(list).to.have.class("custom-nav-class");
+        const nav = screen.getByRole("navigation");
+        expect(nav).to.have.class("custom-nav-class");
 
         const title = screen.getByText("Title");
-        expect(title).to.have.class("custom-title-class");
+        expect(title.parentElement).to.have.class("custom-title-class");
 
         const item = screen.getByRole("button", { name: "Item" });
         expect(item).to.have.class("custom-item-class");
diff --git a/packages/stacks-svelte/src/components/Navigation/NavigationGroup.svelte b/packages/stacks-svelte/src/components/Navigation/NavigationGroup.svelte
new file mode 100644
index 0000000000..5b758ab679
--- /dev/null
+++ b/packages/stacks-svelte/src/components/Navigation/NavigationGroup.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
+
+    interface Props {
+        /**
+         * The title of the navigation section
+         */
+        title: string;
+        /**
+         * Html tag to use for the title: h1, h2, h3, h4, etc.
+         */
+        titleTag?: string;
+        /**
+         * Additional CSS classes added to the outer element
+         */
+        class?: ClassValue;
+        /**
+         * Additional CSS classes added to the title element
+         */
+        titleClass?: ClassValue;
+        /**
+         * Optional content rendered at the end of the navigation title.
+         */
+        trailing?: Snippet;
+        /**
+         * The navigation items rendered inside the group
+         */
+        children: Snippet;
+    }
+
+    let {
+        title,
+        titleTag = "h4",
+        class: className = "",
+        titleClass = "",
+        trailing,
+        children,
+    }: Props = $props();
+
+    // Generate a unique ID for accessibility
+    const uniqueId = `s-nav-${crypto.randomUUID()}`;
+</script>
+
+<li class={className}>
+    <div class={["s-navigation--title", "d-flex", titleClass]}>
+        <svelte:element this={titleTag} class="mb0 fw-normal" id={uniqueId}>
+            {title}
+        </svelte:element>
+        {@render trailing?.()}
+    </div>
+    <ul aria-labelledby={uniqueId}>
+        {@render children?.()}
+    </ul>
+</li>
diff --git a/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte b/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte
index 20f5da5ca8..27370115db 100644
--- a/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte
+++ b/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type {
+        ClassValue,
         HTMLAnchorAttributes,
         HTMLButtonAttributes,
     } from "svelte/elements";
@@ -39,7 +40,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
         /**
          * If true, applies a slide animation to the navigation item.
          */
@@ -66,11 +67,7 @@
         trailing,
         ...restProps
     }: Props = $props();
-    const getClasses = (
-        className: string,
-        selected: boolean,
-        dropdown: boolean
-    ) => {
+    const getClasses = (selected: boolean, dropdown: boolean) => {
         const base = "s-navigation--item";
         let classes = "w100 " + base;
         if (dropdown) {
@@ -79,12 +76,9 @@
         if (selected) {
             classes += ` is-selected`;
         }
-        if (className) {
-            classes += ` ${className}`;
-        }
         return classes;
     };
-    const classes = $derived(getClasses(className, selected, !!dropdown));
+    const classes = $derived(getClasses(selected, !!dropdown));
 
     const maybeslide = (node: Element) => (animate ? slide(node) : {});
 </script>
@@ -93,7 +87,7 @@
     <svelte:element
         this={href ? "a" : "button"}
         {href}
-        class={classes}
+        class={[className, classes]}
         aria-current={selected ? "true" : undefined}
         {...restProps}
     >
diff --git a/packages/stacks-svelte/src/components/Navigation/NavigationTitle.svelte b/packages/stacks-svelte/src/components/Navigation/NavigationTitle.svelte
deleted file mode 100644
index 782c3dc4fb..0000000000
--- a/packages/stacks-svelte/src/components/Navigation/NavigationTitle.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    interface Props {
-        /**
-         * The title of the navigation section
-         */
-        title: string;
-        /**
-         * Additional CSS classes added to the element
-         */
-        class?: string;
-        /**
-         * Optional content rendered at the end of the navigation title.
-         */
-        trailing?: Snippet;
-    }
-    let { title, class: className = "", trailing }: Props = $props();
-    const getClasses = (className: string) => {
-        const base = "s-navigation--title";
-        let classes = "d-flex jc-space-between " + base;
-        if (className) {
-            classes += ` ${className}`;
-        }
-        return classes;
-    };
-    const classes = $derived(getClasses(className));
-</script>
-
-<li class={classes} role="separator">
-    {title}
-    {@render trailing?.()}
-</li>
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.test.ts b/packages/stacks-svelte/src/components/Notice/Notice.test.ts
index d0fa32a229..a9ecde1c8f 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.test.ts
+++ b/packages/stacks-svelte/src/components/Notice/Notice.test.ts
@@ -55,7 +55,9 @@ describe("Notice", () => {
     it("should render dismissable notice", async () => {
         const onDismissMock = sinon.spy();
         render(Notice, {
-            children,
+            children: createRawSnippet(() => ({
+                render: () => `<span>Dismiss Me</span>`,
+            })),
             dismissible: true,
             onDismiss: onDismissMock,
             i18nDismissButtonLabel: "Chiudi",
@@ -73,7 +75,7 @@ describe("Notice", () => {
         expect(closeButton).to.have.class("s-notice--dismiss");
 
         // Confirm the text is on-screen
-        expect(screen.getByText(text)).to.be.visible;
+        expect(screen.getByText("Dismiss Me")).to.be.visible;
 
         // Check dismiss is clicked correctly
         await userEvent.click(closeButton);
diff --git a/packages/stacks-svelte/src/components/index.ts b/packages/stacks-svelte/src/components/index.ts
index 88f10f97b6..c90155fc14 100644
--- a/packages/stacks-svelte/src/components/index.ts
+++ b/packages/stacks-svelte/src/components/index.ts
@@ -17,7 +17,7 @@ export { default as MenuTitle } from "./Menu/MenuTitle.svelte";
 export { default as Modal } from "./Modal/Modal.svelte";
 export { default as Navigation } from "./Navigation/Navigation.svelte";
 export { default as NavigationItem } from "./Navigation/NavigationItem.svelte";
-export { default as NavigationTitle } from "./Navigation/NavigationTitle.svelte";
+export { default as NavigationGroup } from "./Navigation/NavigationGroup.svelte";
 export { default as Notice } from "./Notice/Notice.svelte";
 export { default as NoticeAction } from "./Notice/NoticeAction.svelte";
 export { default as PaginationController } from "./Pagination/PaginationController.svelte";