I have this modal that i launch when a user is on mobile

 <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Browse Categories</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <ul class="nav flex-column">
                        <li class="nav-item">
                        <a class="nav-link active" href="#" id="vone">Home & Garden</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Jewellery & Accessories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Clothing & Shoes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Toys & Games</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Art & Collectibles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Health & Personal Care</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Sports & Outdoors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Beauty</a>
                        </li>
                        
                    </ul>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Since each menu has some more nested menu, i wanted to have a user click to view other menus and navigate between the hidden menus easily. Using just jquery and html, i came across this plugins

1. https://www.jqueryscript.net/demo/Sticky-Header-Navigation-Plugin-jQuery-mhead/demo/default.html

2. https://codepen.io/hsynlms/pen/xMbGaO

Is there a bootstrap plugin that allows mobile users to navigate between hidden nested menus like the plugins above do?

CodePudding user response：

It can be done using the Collapse menu and data-bs-parent attributes to create "accordion" behavior where only a single menu is open at a time...

<div class="position-absolute" id="sidebar">
    <div class="collapse collapse-horizontal show" id="menu" data-bs-parent="#sidebar">
        <div class="card card-body min-vh-100">
            <h6>Main menu</h6>
            <a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#item1">Link</a>
            <div class="collapse" id="item1">item 1 is here</div>
            <a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#smenu1">Categories</a>
            <a href="" class="d-block" data-bs-toggle="collapse" data-bs-target="#smenu2">Stores</a>
        </div>
    </div>
    <div class="collapse collapse-horizontal" id="smenu1" data-bs-parent="#sidebar">
        <div class="card card-body min-vh-100">
            <a href="" class="d-block text-decoration-none" data-bs-toggle="collapse" data-bs-target="#menu">&lt; Main menu</a>
            <h6>Categories</h6>
            ...
        </div>
    </div>
    <div class="collapse collapse-horizontal" id="smenu2" data-bs-parent="#sidebar">
        <div class="card card-body min-vh-100">
            <a href="" class="d-block text-decoration-none" data-bs-toggle="collapse" data-bs-target="#menu">&lt; Main menu</a>
            <h6>Stores</h6>
            ...
        </div>
    </div>
</div>

https://codeply.com/p/Pkxl46iGQr