diff --git a/packages/components/src/components/Navigation/Navigation.module.scss b/packages/components/src/components/Navigation/Navigation.module.scss
index 85e5b80ff8..7a1a9230fa 100644
--- a/packages/components/src/components/Navigation/Navigation.module.scss
+++ b/packages/components/src/components/Navigation/Navigation.module.scss
@@ -1,8 +1,10 @@
 @use "@/styles/mixins/menuItem";
+@use "@/styles/mixins/ellipsis";
 
 .navigation {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 
   ul {
     display: flex;
@@ -17,18 +19,24 @@
   .item {
     @include menuItem.menuItem();
 
-    flex-wrap: wrap;
-
     > .icon {
       order: 0;
+      flex-shrink: 0;
     }
 
     > :not(.icon) {
       order: 1;
     }
 
+    > :not(.icon, .badge) {
+      @include ellipsis.ellipsis;
+
+      min-width: 0;
+    }
+
     .badge {
       margin-inline-start: auto;
+      flex-shrink: 0;
     }
   }
 
diff --git a/packages/components/src/components/Navigation/Navigation.tsx b/packages/components/src/components/Navigation/Navigation.tsx
index e2c4c35286..f15c9836b9 100644
--- a/packages/components/src/components/Navigation/Navigation.tsx
+++ b/packages/components/src/components/Navigation/Navigation.tsx
@@ -1,7 +1,8 @@
-import type { ComponentProps, PropsWithChildren } from "react";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
+import { Children } from "react";
 import styles from "./Navigation.module.scss";
 import clsx from "clsx";
-import { PropsContextProvider } from "@/lib/propsContext";
+import { dynamic, PropsContextProvider } from "@/lib/propsContext";
 import type { PropsWithClassName } from "@/lib/types/props";
 import {
   flowComponent,
@@ -9,6 +10,7 @@ import {
 } from "@/lib/componentFactory/flowComponent";
 import type { ComponentPropsContext } from "@/lib/propsContext/types";
 import { LinkListTunnelExit } from "@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit";
+import { containsTextChild } from "@/lib/react/remote";
 
 export interface NavigationProps
   extends
@@ -16,6 +18,15 @@ export interface NavigationProps
     PropsWithClassName,
     FlowComponentProps<HTMLElement> {}
 
+/**
+ * A bare text node is an anonymous flex item that no rule can reach, so give
+ * the label an element the item can truncate.
+ */
+const wrapTextInLabel = (children: ReactNode): ReactNode =>
+  Children.map(children, (child) =>
+    containsTextChild(child) ? <span>{child}</span> : child,
+  );
+
 /** @flr-generate all */
 export const Navigation = flowComponent("Navigation", (props) => {
   const { className, children, ref, ...rest } = props;
@@ -26,6 +37,7 @@ export const Navigation = flowComponent("Navigation", (props) => {
     wrapWith: <li />,
     className: styles.item,
     unstyled: true,
+    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),
     Icon: {
       className: styles.icon,
       size: "m",
diff --git a/packages/remote-react-components/src/tests/visual/Navigation.browser.test.tsx b/packages/remote-react-components/src/tests/visual/Navigation.browser.test.tsx
index 1fc719de4f..1bd9d78821 100644
--- a/packages/remote-react-components/src/tests/visual/Navigation.browser.test.tsx
+++ b/packages/remote-react-components/src/tests/visual/Navigation.browser.test.tsx
@@ -76,19 +76,25 @@ test.each(testEnvironments)(
       Badge,
       IconStar,
       Text,
+      Truncate,
     },
   }) => {
     await render(
       <ColumnLayout m={[1, 1, 1, 1, 1, 1]}>
         <Navigation>
           <Link>
-            Galactic Empire<AlertBadge status="warning">Deprecated</AlertBadge>
+            Galactic Empire of the Outer Rim
+            <AlertBadge status="warning">Deprecated</AlertBadge>
           </Link>
           <Link>
             <IconStar />
-            <Text>Rebel Alliance</Text>
+            <Text>Rebel Alliance High Command</Text>
             <Badge>Neu</Badge>
           </Link>
+          <Link>
+            <IconStar />
+            <Truncate>Mandalorian Covert of Nevarro</Truncate>
+          </Link>
         </Navigation>
       </ColumnLayout>,
     );
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-darwin.png
index 51f36c1098..9292fbf483 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-darwin.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-linux.png
index 24ebb769a8..fb91977030 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-firefox-linux.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-darwin.png
index 5b48ee0f99..6c37a416bc 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-darwin.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-darwin.png differ
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-linux.png
index 5a8456245d..2174db78ef 100644
Binary files a/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-linux.png and b/packages/remote-react-components/src/tests/visual/__screenshots__/Navigation.browser.test.tsx/Navigation-narrow-container-webkit-linux.png differ