Open In App

Bootstrap 5 Breadcrumb

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.

Bootstrap 5 Breadcrumb

  • Breadcrumb Variables: It changes the default values provided for the breadcrumb by customizing SCSS file of Bootstrap 5.
  • Breadcrumb Dividers: It customizes the bootstrap 5 breadcrumb divider, the –bs-breadcrumb-divider custom CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables can be used.

Syntax:

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

Example 1: This example uses shows the working of Breadcrumbs in Bootstrap 5.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 Breadcrumbs
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body class="container">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Breadcrumb</strong>
    </div>
    <br>
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">GeeksforGeeks</li>
                <li class="breadcrumb-item">HTML Tutorial</li>
                <li class="breadcrumb-item">CSS Tutorial</li>
            </ol>
        </nav>
    </div>
</body>
</html>


Output:

 

 Example 2: This example uses shows the working of Breadcrumbs in Bootstrap 5.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 Breadcrumbs
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet"
          href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;margin:20px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">
                      GeeksforGeeks
                    </a>
                </li>
                <li class="breadcrumb-item">
                    Articles
                </li>
            </ol>
        </nav>
    </div>
</body>
</html>


Output:

 
 



Last Updated : 24 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads