VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-breadcrumb/

⇱ Bootstrap Breadcrumb - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap Breadcrumb

Last Updated : 15 Jul, 2025

Bootstrap 5 Breadcrumb simplifies website navigation by displaying a sequential path to the current page. It enhances user experience by visually indicating the hierarchical structure of the site, facilitating easy navigation as per Bootstrap 5 documentation.

Bootstrap 5 Breadcrumb

TermDescription
Breadcrumb VariablesChanges default values for the breadcrumb by customizing SCSS file of Bootstrap 5.
Breadcrumb DividersCustomizes the Bootstrap 5 breadcrumb divider using the --bs-breadcrumb-divider CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables.

Syntax:

<ol class="breadcrumb">
 <li class="breadcrumb-item"> Content .. </li>
</ol>

Example 1: This example we are using Bootstrap 5 Breadcrumbs, aiding hierarchical navigation with clear links indicating the user's position within the site's structure.

Output:

👁 Bootstrap-5-Breadcrumb
Bootstrap 5 Breadcrumb Example Output

Example 2: This example we Bootstrap 5 Breadcrumbs for hierarchical navigation within a website, offering clear links to different sections or pages.

Output:

👁 Bootstrap-breadcrumbs
Bootstrap 5 Breadcrumb Example Output
Comment
Article Tags:

Explore