Mobile menu

Bootstrap 5 Mobile menu component

Responsive Mobile menu built with Bootstrap 5. An example of bootstrap mobile menu - so-called hamburger menu.

A mobile menu is a navigation type that serves the purpose of hiding some menu items & showing them on click. It stacks the items on top of each other in a "hamburger" fashion.

Basic example

Simple example of a mobile menu in a navbar.

Edit in sandbox 
        
            
                <nav class="navbar navbar-light bg-body-tertiary">
                    <div class="container-fluid">
                        <button data-mdb-button-init
                            class="navbar-toggler"
                            type="button"
                            data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent2"
                            aria-controls="navbarToggleExternalContent1"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                        >
                            <i class="fas fa-bars text-dark"></i>
                        </button>
                        <a class="navbar-brand" href="#">Navbar</a>
                    </div>
                </nav>
                <div class="collapse" id="navbarToggleExternalContent2">
                    <ul class="bg-body-tertiary shadow-3 py-2 px-3">
                        <li data-mdb-ripple-init class="btn btn-link btn-block m-0 p-2 text-start text-dark">home</li>
                        <li data-mdb-ripple-init class="btn btn-link btn-block m-0 p-2 text-start text-dark">Features</li>
                        <li data-mdb-ripple-init class="btn btn-link btn-block m-0 p-2 text-start text-dark">Pricing</li>
                    </ul>
                </div>