How do I make breadcrumb navigation responsive and truncate long paths?

Asked on Aug 14, 2025

1 Answer

To create a responsive breadcrumb navigation that truncates long paths, you can use Bootstrap's breadcrumb component along with utility classes to handle text overflow.

<!-- BEGIN COPY / PASTE -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item active text-truncate" aria-current="page" style="max-width: 150px;">
                    This is a very long breadcrumb item that should be truncated
                </li>
            </ol>
        </nav>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `text-truncate` class to apply text truncation.
Set a `max-width` style to control the truncation point.
Ensure the breadcrumb container has a fixed or relative width to see the effect.
The `aria-current` attribute indicates the current page.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions