How to create dynamic breadcrumbs using JavaScript? - GeeksforGeeks

01 Oct, 2021
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.
Approach:
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.
HTML
<!DOCTYPE HTML><html><head>      <script src=   "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">   </script>    </head><style>   body{     background-color:white;   }  .display{    background-color:red;   }    </style><body>  <h2 style="color:green;">GeeksforGeeks</h2>      <div class="topics">   <ol>       <li><a href="#"><b>Searching</b></a>         <ul>          <li><a href="#">Linear Search</a></li>          <li><a href="#">Binary Serach</a></li>         </ul>       </li>      <li><a href="#"><b>Sorting</b></a>        <ul>            <li><a href="#">Bubble Sort</a></li>            <li><a href="#">Merge Sort</a>                <ul>                    <li><a href="#"><i>Recursive Merge Sort</i></a></li>                    <li><a href="#"><i>Iterative Merge Sort</i></a></li>                </ul>            </li>            <li><a href="#">Selection Sort</a></li>            <li><a href="#">Insertion Sort</a>         </ul>     </li>     <li><a href="#"><b>Tree</b></a>      <ul>          <li><a href="#">Binary Tree</a></li>          <li><a href=" #">Binary Search Tree</a></li>        </ul>     </li>   </ol></div>   <div class="display">    <div class="syllabus">      <a href="#">GeeksforGeeks / </a>    </div>  </div>            <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.    $('.display').html(      $select.prepend('<a href="#syllabus">GeeksforGeeks</a>'));   }) </script></body>   </html>
Output:
Before execute:
After execute:
anikakapoor
JavaScript-Methods
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript