Skip to main content

Navbar

Create a navigation bar with a dropdown menu.

                
                    <nav class="site-nav navbar navbar-expand-md navbar-light">
                        <a href="#" class="navbar-brand text-uppercase">Navbar</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle main navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarToggle">
                            <ul class="navbar-nav text-uppercase ml-auto my-2 my-md-0">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Item</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Item</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                        <svg class="bi bi-chevron-down" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                          <path fill-rule="evenodd" d="M3.646 6.646a.5.5 0 01.708 0L10 12.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" clip-rule="evenodd"/>
                                        </svg>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Item 1</a>
                                        <a class="dropdown-item" href="#">Item 2</a>
                                        <a class="dropdown-item" href="#">Item 3</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                
            

Bootstrap DocumentationExternal link