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 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>