Indicate the current page's location within a hierarchy using Bootstrap's native breadcrumb list.
Use .breadcrumb to show the current page's position inside a navigational hierarchy. Wrap the ordered trail in a nav with aria-label="breadcrumb", render parent levels as links inside .breadcrumb-item, and mark the final page with aria-current="page".
.breadcrumb
nav
aria-label="breadcrumb"
.breadcrumb-item
aria-current="page"
Keep labels short and structural: breadcrumbs answer where the user is, not what actions they can take. Bootstrap adds separators with CSS, so avoid hardcoding divider characters in the list content itself.
When a product needs a different divider, set --bs-breadcrumb-divider on the breadcrumb wrapper or use the documented Sass variable. Keep RTL in mind when customizing divider artwork, and avoid placing unrelated menus or controls inside the trail unless they still represent hierarchy.
--bs-breadcrumb-divider
Every item but the last links back up the hierarchy; the last item marks aria-current="page".
1 2 3 4 5 6 7 8 9 10 11<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
Swap the divider glyph per instance through Bootstrap's own --bs-breadcrumb-divider custom property.
1 2 3 4 5 6 7 8 9 10 11<nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
<nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
Let a middle segment open a menu of sibling sections instead of linking to just one.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29<nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>Components</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>Documentation</span></a> </li> <li> <a class="dropdown-item" href="#"><span>Themes</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li> </ol> </nav>
<nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>Components</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>Documentation</span></a> </li> <li> <a class="dropdown-item" href="#"><span>Themes</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li> </ol> </nav>
Mark skipped levels with an ellipsis segment when the full trail would crowd the layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <span class="breadcrumb-ellipsis"> <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">More</span> </span> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Workspace</a> </li> <li class="breadcrumb-item"> <span class="breadcrumb-ellipsis"> <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">More</span> </span> </li> <li class="breadcrumb-item"> <a href="#">Projects</a> </li> <li class="breadcrumb-item active" aria-current="page">Growth dashboard</li> </ol> </nav>
Use tabs to compare Arabic, Hebrew, and English breadcrumb trails with a dropdown segment and custom separator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<div dir="rtl"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">الرئيسية</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>المكونات</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>التوثيق</span></a> </li> <li> <a class="dropdown-item" href="#"><span>السمات</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">مسار التنقل</li> </ol> </nav> </div>
<div dir="rtl"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">الرئيسية</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>المكونات</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>التوثيق</span></a> </li> <li> <a class="dropdown-item" href="#"><span>السمات</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">مسار التنقل</li> </ol> </nav> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<div dir="rtl"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">בית</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>רכיבים</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>תיעוד</span></a> </li> <li> <a class="dropdown-item" href="#"><span>ערכות נושא</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">פירורי לחם</li> </ol> </nav> </div>
<div dir="rtl"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">בית</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>רכיבים</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>תיעוד</span></a> </li> <li> <a class="dropdown-item" href="#"><span>ערכות נושא</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">פירורי לחם</li> </ol> </nav> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<div dir="ltr"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>Components</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>Documentation</span></a> </li> <li> <a class="dropdown-item" href="#"><span>Themes</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li> </ol> </nav> </div>
<div dir="ltr"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb--custom-divider" style="--bs-breadcrumb-divider: '•';"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <div class="breadcrumb-dropdown-item"> <div class="dropdown"> <button class="breadcrumb-dropdown-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span>Components</span> <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#"><span>Documentation</span></a> </li> <li> <a class="dropdown-item" href="#"><span>Themes</span></a> </li> <li> <a class="dropdown-item" href="#"><span>GitHub</span></a> </li> </ul> </div> </div> </li> <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li> </ol> </nav> </div>
For Bootstrap's source behavior and divider customization, see the Bootstrap Breadcrumb documentation.
No matching pages.
Restore the default appearance.