Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to create dynamic breadcrumbs using JavaScript?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we will see how to create dynamic breadcrumbs using JavaScript.

 A dynamic breadcrumb allows us to navigate to different pages within the navigational hierarchy, and thus we can organize various pages of the website in a hierarchical manner just like a folder-like structure.


The following example is implemented using HTML and JavaScript.

HTML lists like <ol>,<ul>,<li> are used to create the navigation links. 

Breadcrumbs dynamic navigation is implemented using various JavaScript functions like jQuery prepend(),clone() and click() methods. On click of each navigation link <a> , the child nodes are appended to its parent along with the “GeeksforGeeks /” link in the bottom div with the class display. This whole navigation hierarchy is shown in the last HTML div using jQuery html() method.

Example: The following code demonstrates the above approach.


   <script src=
  <h2 style="color:green;">GeeksforGeeks</h2>  
<div class="topics">
       <li><a href="#"><b>Searching</b></a>
          <li><a href="#">Linear Search</a></li>
          <li><a href="#">Binary Search</a></li>
      <li><a href="#"><b>Sorting</b></a>
            <li><a href="#">Bubble Sort</a></li>
            <li><a href="#">Merge Sort</a>
                    <li><a href="#"><i>Recursive Merge Sort</i></a></li>
                    <li><a href="#"><i>Iterative Merge Sort</i></a></li>
            <li><a href="#">Selection Sort</a></li>
            <li><a href="#">Insertion Sort</a
     <li><a href="#"><b>Tree</b></a>
          <li><a href="#">Binary Tree</a></li>
          <li><a href=" #">Binary Search Tree</a></li>
  <div class="display">
    <div class="syllabus">
      <a href="#">GeeksforGeeks / </a>
<script type="text/javascript">
   $('.topics a').on('click', function() {
    //selecting the syllabus class
      $select = $('<div class="syllabus"></div>');
      $(this).parents('li').each(function(n, li) {
         //Adding / to each anchor tag of li
          $select.prepend(' / ',$(li).children('a').clone());
    // Displaying the hierarchical order of pages.
      $select.prepend('<a href="#syllabus">GeeksforGeeks</a>'));   


  • Before execute:

  • After execute:

My Personal Notes arrow_drop_up
Last Updated : 08 Sep, 2022
Like Article
Save Article
Similar Reads
Related Tutorials