How to create a Breadcrumb Navigation ? - GeeksforGeeks

23 Apr, 2021
In this article, we will learn how to create breadcrumbs navigation. Breadcrumbs are a secondary navigation aid that helps users easily navigate through a website. Breadcrumbs provide you an orientation and show you exactly where you are within the website’s hierarchy.
Approach 1: We will follow the below steps for creating breadcrumbs using only CSS. This method allows to exactly customize how the breadcrumbs would look like.
Step 1: Create an HTML list of the navigation links.
<ul class="breadcrumb-navigation">
    <li><a href="home">Home</a></li>
    <li><a href="webdev">Web Development</a></li>
    <li><a href="frontenddev">Frontend Development</a></li>
    <li>JavaScript</li>
</ul>
Step 2: Set the CSS display: inline in order to show the list in the same line.
.breadcrumb-navigation > li {
  display: inline;
}
 
Step 3: Add a separator after every list element.
.breadcrumb-navigation li + li:before {
  padding: 4px;
  content: "/";
}
Example:
HTML
<!DOCTYPE html><html>  <head>    <style>        .breadcrumb-navigation {            padding: 10px 18px;            background-color: rgb(238, 238, 238);        }          .breadcrumb-navigation>li {            display: inline;        }          .breadcrumb-navigation>li>a {            color: #026ece;            text-decoration: none;        }          .breadcrumb-navigation>li>a:hover {            color: #6fc302;            text-decoration: underline;        }          .breadcrumb-navigation li+li:before {            padding: 4px;            content: "/";        }    </style></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>    <ul class="breadcrumb-navigation">        <li>            <a href="home">                Home            </a>        </li>        <li>            <a href="webdev">                Web Development            </a>        </li>        <li>            <a href="frontenddev">                Frontend Development            </a>        </li>        <li>JavaScript</li>    </ul></body>  </html>
Output:
Approach 2: We will follow the below steps for creating breadcrumbs using the Bootstrap library. This allows one to quickly create good-looking breadcrumbs. 
Step 1: We simply add aria-label=”breadcrumb” to the nav element.
<nav aria-label="breadcrumb">
Step 2: We next add class=”breadcrumb-item” in the list elements.
<li class="breadcrumb-item"><a href="#">
    Home
</a></li>
Step 3: Add class=”breadcrumb-item active” in the current list element.
<li class="breadcrumb-item active" aria-current="page">
    JavaScript
</li>
Example:
HTML
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>    <nav aria-label="breadcrumb">        <ol class="breadcrumb">            <li class="breadcrumb-item">                <a href="home">Home</a>            </li>            <li class="breadcrumb-item">                <a href="webdev">Web Development</a>            </li>            <li class="breadcrumb-item">                <a href="frontenddev">                    Frontend Development                </a>            </li>            <li class="breadcrumb-item active"                 aria-current="page">                JavaScript            </li>        </ol>    </nav></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
CSS-Properties
CSS-Questions
HTML-Questions
Picked
Bootstrap
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form