My objective is to present hierarchical data using the bootstrap breadcrumb component. Specifically, upon clicking the separator symbol >, I aim to showcase a dropdown list containing the siblings - akin to the interface in Windows Explorer when navigating through folders within a directory structure. Upon clicking the arrow adjacent to 'Internet Explorer,' we can observe the subsequent subfolders.
https://i.sstatic.net/93rYG.png
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Parent</a></li>
<li class="breadcrumb-item"><a href="#">Item1</a></li>
<li class="breadcrumb-item active" aria-current="page">Subitem1</li>
</ol>
</nav>In the context of the breadcrumb trail formed by Parent > Item1 > Subitem1, my intention is to enable a dropdown feature when selecting the separator positioned between Parent and Item1. This dropdown should present options such as Item1 (active), Item2, and Item3.
Parent
Item1
Subitem1
Subitem2
Item2
Item3
I am seeking guidance on how to implement the dropdown functionality within the separator element.