Skip to content

docs: add no truncation information on breadcrumb #3270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vprothais merged 3 commits into from
Dec 16, 2025
Merged

docs: add no truncation information on breadcrumb #3270

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
379d2a8
docs: add no truncation information on breadcrumb
MaxLardenois Dec 15, 2025
74916cc
fix: review proposition
MaxLardenois Dec 16, 2025
2727138
Merge branch 'ouds/main' into ouds/main-ml-add-documentation-about-av…
vprothais Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion site/src/content/docs/components/breadcrumb.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,12 @@ 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">
**Breadcrumb items should not be this long**, the following examples are for small viewport demonstration purpose only
**Breadcrumb items should not be this long**, the following examples are for small viewport demonstration purpose only.
</Callout>

<Example code={`<nav aria-label="large breadcrumb">
Expand All @@ -83,3 +85,21 @@ 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>`, this could be useful for brand names like Orange which should never be truncated. The penultimate item has this option set by default so it's not useful to add it. The items will still be hidden on smaller screens.

<Callout type="danger">
Be aware that adding this utility to all items would result in an overflow.
</Callout>

<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>`} />
Loading