diff --git a/packages/styles/dist/gitlab-ui.css b/packages/styles/dist/gitlab-ui.css
index 80ed69e..bba7c31 100644
--- a/packages/styles/dist/gitlab-ui.css
+++ b/packages/styles/dist/gitlab-ui.css
@@ -7387,6 +7387,9 @@
     overflow: hidden;
     white-space: nowrap;
   }
+  .gl-collapsible-nav .gl-nav-item-chevron-slot {
+    margin-inline-start: auto;
+  }
   .gl-collapsible-nav .gl-nav-item-addon, .gl-collapsible-nav .gl-nav-item-chevron {
     max-width: 1.5rem;
   }
diff --git a/packages/ui/src/base/nav/nav.css b/packages/ui/src/base/nav/nav.css
index 20c9077..78aa65c 100644
--- a/packages/ui/src/base/nav/nav.css
+++ b/packages/ui/src/base/nav/nav.css
@@ -204,6 +204,10 @@
     white-space: nowrap;
   }
 
+  .gl-nav-item-chevron-slot {
+    margin-inline-start: auto;
+  }
+
   .gl-nav-item-addon,
   .gl-nav-item-chevron {
     max-width: 1.5rem;
diff --git a/packages/ui/src/base/nav/nav.stories.tsx b/packages/ui/src/base/nav/nav.stories.tsx
index d24a7b3..9ae8226 100644
--- a/packages/ui/src/base/nav/nav.stories.tsx
+++ b/packages/ui/src/base/nav/nav.stories.tsx
@@ -565,6 +565,42 @@ export const ProviderRemoteControl: Story = {
   },
 };
 
+export const SubNavChevronAlignment: Story = {
+  render: () => (
+    <GlNavProvider defaultOpen navId="sub-nav-chevron-alignment">
+      <GlCollapsibleNav aria-label="Sub-navigation chevron alignment">
+        <GlNavItem>
+          <GlNavButton><GlIcon name="settings" />Manage with icon</GlNavButton>
+          <GlSubNav>
+            <GlSubNavItem>
+              <GlSubNavButton href="/with-icon">Child with icon</GlSubNavButton>
+            </GlSubNavItem>
+          </GlSubNav>
+        </GlNavItem>
+        <GlNavItem>
+          <GlNavButton>Manage without icon</GlNavButton>
+          <GlSubNav>
+            <GlSubNavItem>
+              <GlSubNavButton href="/without-icon">Child without icon</GlSubNavButton>
+            </GlSubNavItem>
+          </GlSubNav>
+        </GlNavItem>
+      </GlCollapsibleNav>
+    </GlNavProvider>
+  ),
+  play: async ({ canvas }) => {
+    const withIcon = canvas.getByRole("button", { name: "Manage with icon" });
+    const withoutIcon = canvas.getByRole("button", { name: "Manage without icon" });
+    const withIconChevron = within(withIcon).getByTestId("nav-item-chevron");
+    const withoutIconChevron = within(withoutIcon).getByTestId("nav-item-chevron");
+
+    await waitFor(() => {
+      expect(Math.round(withoutIconChevron.getBoundingClientRect().right))
+        .toBe(Math.round(withIconChevron.getBoundingClientRect().right));
+    });
+  },
+};
+
 export const InternalToggle: Story = {
   render: () => (
     <GlNavProvider defaultOpen navId="internal-toggle-navigation">
diff --git a/packages/ui/src/base/nav/nav.test.tsx b/packages/ui/src/base/nav/nav.test.tsx
index 444dc3b..ea7d1ec 100644
--- a/packages/ui/src/base/nav/nav.test.tsx
+++ b/packages/ui/src/base/nav/nav.test.tsx
@@ -353,6 +353,7 @@ describe("GlSubNav", () => {
 
     expect(markup).toContain("aria-expanded=\"false\"");
     expect(markup).toContain("data-testid=\"nav-item-chevron\"");
+    expect(markup).toContain("gl-nav-item-chevron-slot");
     expect(markup).toContain("aria-hidden=\"true\"");
     expect(markup).not.toContain("defaultOpen");
   });
diff --git a/packages/ui/src/base/nav/nav.tsx b/packages/ui/src/base/nav/nav.tsx
index 61630f3..df07aa0 100644
--- a/packages/ui/src/base/nav/nav.tsx
+++ b/packages/ui/src/base/nav/nav.tsx
@@ -245,7 +245,7 @@ function simpleTextLabel(nodes: ReactNode[]) {
 function NavItemChevron() {
   return (
     <span
-      className={navSlotVariants()}
+      className={navSlotVariants({ className: "gl-nav-item-chevron-slot" })}
       data-testid="nav-item-chevron"
       aria-hidden="true">
       <svg