docs: add no truncation information on breadcrumb

Author: MaxLardenois

site/src/content/docs/components/breadcrumb.mdx

@@ -60,6 +60,8 @@ Use an ordered or unordered list with linked list items to create a minimally st
 
 ## Layout
 
+### Breakpoints behavior
+
 Breadcrumb will never wrap, the number of displayed items depends on the available width, the final two items will always be shown.
 
 <Callout type="danger">
@@ -83,3 +85,17 @@ Breadcrumb will never wrap, the number of displayed items depends on the availab
       <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
     </ol>
   </nav>`} />
+
+### Avoiding truncation
+
+To prevent a specific item from being truncated, add `.flex-shrink-0` on the `<li>`. The penultimate item has this option set by default so it's not useful to add it. Be aware that adding this utility to all items would result in an overflow. The items will still be hidden on smaller screens.
+
+<Example code={`<nav aria-label="very large breadcrumb with no truncation on some items">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Home">Home</a></li>
+      <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Very long subcategory to test responsive">Very long subcategory to test responsive</a></li>
+      <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive 1">Very long subcategory to test responsive 1</a></li>
+      <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive A">Very long subcategory to test responsive A</a></li>
+      <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
+    </ol>
+  </nav>`} />