LUNO

  1. Home
  2. Documentation
  3. Navbar
Bootstrap modal Bootstrap navs

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Read on for an example and list of supported sub-components.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu border-0 shadow" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

This example uses color (bg-light) and spacing (my-2, my-lg-0, me-sm-0, my-sm-0) utility classes.

<div class="header">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">

            <!-- Brand -->
            <a href="index.html" class="me-3 me-lg-4 brand-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 64 80" fill="none">
                    <path d="M58.8996 22.7L26.9996 2.2C23.4996 -0.0999999 18.9996 0 15.5996 2.5C12.1996 5 10.6996 9.2 11.7996 13.3L15.7996 26.8L3.49962 39.9C-3.30038 47.7 3.79962 54.5 3.89962 54.6L3.99962 54.7L36.3996 78.5C36.4996 78.6 36.5996 78.6 36.6996 78.7C37.8996 79.2 39.1996 79.4 40.3996 79.4C42.9996 79.4 45.4996 78.4 47.4996 76.4C50.2996 73.5 51.1996 69.4 49.6996 65.6L45.1996 51.8L58.9996 39.4C61.7996 37.5 63.3996 34.4 63.3996 31.1C63.4996 27.7 61.7996 24.5 58.8996 22.7ZM46.7996 66.7V66.8C48.0996 69.9 46.8996 72.7 45.2996 74.3C43.7996 75.9 41.0996 77.1 37.9996 76L5.89961 52.3C5.29961 51.7 1.09962 47.3 5.79962 42L16.8996 30.1L23.4996 52.1C24.3996 55.2 26.5996 57.7 29.5996 58.8C30.7996 59.2 31.9996 59.5 33.1996 59.5C35.0996 59.5 36.9996 58.9 38.6996 57.8C38.7996 57.8 38.7996 57.7 38.8996 57.7L42.7996 54.2L46.7996 66.7ZM57.2996 36.9C57.1996 36.9 57.1996 37 57.0996 37L44.0996 48.7L36.4996 25.5V25.4C35.1996 22.2 32.3996 20 28.9996 19.3C25.5996 18.7 22.1996 19.8 19.8996 22.3L18.2996 24L14.7996 12.3C13.8996 8.9 15.4996 6.2 17.3996 4.8C18.4996 4 19.8996 3.4 21.4996 3.4C22.6996 3.4 23.9996 3.7 25.2996 4.6L57.1996 25.1C59.1996 26.4 60.2996 28.6 60.2996 30.9C60.3996 33.4 59.2996 35.6 57.2996 36.9Z" fill="black"></path>
                </svg>
            </a>

            <!-- header rightbar icon -->
            <div class="h-right d-flex align-items-center me-5 me-lg-0 order-1">
                <div class="d-flex">
                    <a class="nav-link text-muted collapsed" data-toggle="collapse" data-target="#main-search" href="#" title="Search this chat" aria-expanded="false">
                        <i class="fa fa-search"></i>
                    </a>
                    <a class="nav-link text-primary" href="#" data-toggle="modal" data-target="#LayoutModal">
                        <i class="fa fa-sliders"></i>
                    </a>
                    <a class="nav-link text-primary" href="#" title="Settings" data-toggle="modal" data-target="#SettingsModal"><i class="fa fa-gear"></i></a>
                </div>
                <div class="dropdown notifications">
                    <a class="nav-link dropdown-toggle pulse" href="#" role="button" data-toggle="dropdown">
                        <i class="fa fa-bell"></i>
                        <span class="pulse-ring"></span>
                    </a>
                    <div id="NotificationsDiv" class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-end p-0 m-0">
                        <div class="card border-0 w380">
                            <div class="card-header border-0 p-3">
                                <h5 class="mb-0 fw-light d-flex justify-content-between">
                                    <span>Notifications Center</span>
                                    <span class="badge text-muted">14</span>
                                </h5>
                                <ul class="nav nav-tabs mt-3 border-bottom-0" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link fw-light ps-0 me-2 active" data-bs-toggle="tab" href="#Noti-tab-Message" role="tab">Message</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fw-light me-2" data-bs-toggle="tab" href="#Noti-tab-Events" role="tab">Events</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fw-light" data-bs-toggle="tab" href="#Noti-tab-Logs" role="tab">Logs</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content card-body">
                                <div class="tab-pane fade show active" id="Noti-tab-Message" role="tabpanel">
                                    <ul class="list-unstyled list mb-0">
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar1.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Chris Fox</span> <small>2MIN</small></p>
                                                    <span class="text-muted">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded-circle no-thumbnail">RH</div>
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Robert Hammer</span> <small>13MIN</small></p>
                                                    <span class="text-muted">It is a long established fact that a reader will be distracted</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar3.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Orlando Lentz</span> <small>1HR</small></p>
                                                    <span class="text-muted">There are many variations of passages</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar4.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Barbara Kelly</span> <small>1DAY</small></p>
                                                    <span class="text-muted">Contrary to popular belief <span class="badge bg-danger">Code</span></span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar5.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Robert Hammer</span> <small>13MIN</small></p>
                                                    <span class="text-muted">making it over 2000 years old</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar6.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Orlando Lentz</span> <small>1HR</small></p>
                                                    <span class="text-muted">There are many variations of passages</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar7.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Rose Rivera</span> <small class="">1DAY</small></p>
                                                    <span class="text-muted">The generated Lorem Ipsum</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Noti-tab-Events" role="tabpanel">
                                    <ul class="list-unstyled list mb-0">
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-info-circle fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Campaign <strong class="text-primary">Holiday Sale</strong> is nearly reach budget limit.</p>
                                                    <small class="text-muted">10:00 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
                                                    <small class="text-muted">11:30 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-pie-chart fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Website visits from Twitter is <strong class="text-danger">27% higher</strong> than last week.</p>
                                                    <small class="text-muted">04:00 PM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-warning fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted"><strong class="text-warning">Error</strong> on website analytics configurations</p>
                                                    <small class="text-muted">Yesterday</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
                                                    <small class="text-muted">11:30 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Noti-tab-Logs" role="tabpanel">
                                    <h4>No Logs right now!</h4>
                                </div>
                            </div>
                            <a class="card-footer text-center border-top-0" href="#"> View all notifications</a>
                        </div>
                    </div>
                </div>
                <div class="dropdown user-profile ms-2 ms-sm-3">
                    <a class="nav-link dropdown-toggle pulse p-0" href="#" role="button" data-toggle="dropdown">
                        <img class="avatar rounded-circle img-thumbnail" src="assets/images/profile_av.png" alt="">
                    </a>
                    <div class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-end p-0 m-0">
                        <div class="card border-0 w240">
                            <div class="card-body border-bottom">
                                <div class="d-flex py-1">
                                    <img class="avatar rounded-circle" src="../assets/img/profile_av.png" alt="">
                                    <div class="flex-fill ms-3">
                                        <p class="mb-0 text-muted"><span class="fw-bold;Chris Fox</span></p>
                                        <small class="text-muted">alliegrater@luno.com</small>
                                        <div>
                                            <a href="#" class="card-link">Sign out</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group m-2">
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-user"></i>Profile &amp; account</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-gear"></i>Settings</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-tag"></i>Customization</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-users"></i>Manage team</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-calendar"></i>My Events</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-credit-card"></i>My Statements</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- menu toggler -->
            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse" data-target="#mainHeader">
                <span class="fa fa-bars"></span>
            </button>

            <!-- main menu -->
            <div class="collapse navbar-collapse order-0" id="mainHeader">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fa fa-dashboard me-2"></i><span>Dashboard</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-slack me-2"></i><span>Apps</span>
                        </a>
                        <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                            <li><a class="dropdown-item" href="#">Calendar</a></li>
                            <li><a class="dropdown-item" href="#">Chat app</a></li>
                            <li><a class="dropdown-item" href="#">Inbox</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-file me-2"></i><span>Pages</span>
                        </a>
                        <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                            <li><a class="dropdown-item" href="profile.html">Profile</a></li>
                            <li><a class="dropdown-item" href="timeline.html">Timeline</a></li>
                            <li><a class="dropdown-item" href="imagegallery.html">Image Gallery</a></li>
                            <li><a class="dropdown-item" href="invoices.html">Invoices</a></li>
                            <li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
                            <li><a class="dropdown-item" href="teamsboard.html">Teams Board</a></li>
                            <li><a class="dropdown-item" href="faqs.html">FAQs</a></li>
                            <li><a class="dropdown-item" href="#">Widget's</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-lock me-2"></i><span>Authentication</span>
                        </a>
                        <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                            <li><a class="dropdown-item" href="auth-signin.html">Sign in</a></li>
                            <li><a class="dropdown-item" href="auth-signup.html">Sign up</a></li>
                            <li><a class="dropdown-item" href="auth-password-reset">Password reset</a></li>
                            <li><a class="dropdown-item" href="auth-two-step">2-Step Authentication</a></li>
                            <li><a class="dropdown-item" href="auth-404">404</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-file-text me-2"></i><span>Docs</span>
                        </a>
                        <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                            <li><a class="dropdown-item" href="#">Stater page</a></li>
                            <li><a class="dropdown-item" href="#">Documentation</a></li>
                            <li><a class="dropdown-item" href="#">Changelog</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </nav>

    <!-- Search: div -->
    <div class="border-bottom px-lg-5 px-md-2 collapse bg-primary" id="main-search">
        <div class="container py-4">

            <div class="input-group">
                <input type="text" class="form-control border-0 p-0 bg-transparent" placeholder="Search. Components, Layouts, etc...">

                <div class="input-group-append ms-3">
                    <button class="btn btn-light" type="submit">Search</button>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="header shadow-sm">
    <nav class="navbar navbar-light bg-secondary py-2 py-md-3 px-lg-5 px-md-2">
        <div class="container-fluid">

            <!-- Brand -->
            <a href="index.html" class="me-3 me-lg-4 brand-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 64 80" fill="none">
                    <path d="M58.8996 22.7L26.9996 2.2C23.4996 -0.0999999 18.9996 0 15.5996 2.5C12.1996 5 10.6996 9.2 11.7996 13.3L15.7996 26.8L3.49962 39.9C-3.30038 47.7 3.79962 54.5 3.89962 54.6L3.99962 54.7L36.3996 78.5C36.4996 78.6 36.5996 78.6 36.6996 78.7C37.8996 79.2 39.1996 79.4 40.3996 79.4C42.9996 79.4 45.4996 78.4 47.4996 76.4C50.2996 73.5 51.1996 69.4 49.6996 65.6L45.1996 51.8L58.9996 39.4C61.7996 37.5 63.3996 34.4 63.3996 31.1C63.4996 27.7 61.7996 24.5 58.8996 22.7ZM46.7996 66.7V66.8C48.0996 69.9 46.8996 72.7 45.2996 74.3C43.7996 75.9 41.0996 77.1 37.9996 76L5.89961 52.3C5.29961 51.7 1.09962 47.3 5.79962 42L16.8996 30.1L23.4996 52.1C24.3996 55.2 26.5996 57.7 29.5996 58.8C30.7996 59.2 31.9996 59.5 33.1996 59.5C35.0996 59.5 36.9996 58.9 38.6996 57.8C38.7996 57.8 38.7996 57.7 38.8996 57.7L42.7996 54.2L46.7996 66.7ZM57.2996 36.9C57.1996 36.9 57.1996 37 57.0996 37L44.0996 48.7L36.4996 25.5V25.4C35.1996 22.2 32.3996 20 28.9996 19.3C25.5996 18.7 22.1996 19.8 19.8996 22.3L18.2996 24L14.7996 12.3C13.8996 8.9 15.4996 6.2 17.3996 4.8C18.4996 4 19.8996 3.4 21.4996 3.4C22.6996 3.4 23.9996 3.7 25.2996 4.6L57.1996 25.1C59.1996 26.4 60.2996 28.6 60.2996 30.9C60.3996 33.4 59.2996 35.6 57.2996 36.9Z" fill="black"></path>
                </svg>
            </a>

            <!-- Search -->
            <div class="h-left">
                <div class="input-group border rounded">
                    <button class="btn btn-outline-secondary dropdown-toggle border-0 d-none d-sm-block" type="button" data-toggle="dropdown" aria-expanded="false">Fillter</button>
                    <ul class="dropdown-menu border-0 shadow">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                    </ul>
                    <input type="text" class="form-control bg-transparent border-0" placeholder="Search here...">
                </div>
            </div>

            <!-- header rightbar icon -->
            <div class="h-right flex-grow-1 justify-content-end d-flex align-items-center me-5 me-lg-0">
                <div class="d-flex">
                    <a class="nav-link text-primary" href="#" title="Settings" data-toggle="modal" data-target="#SettingsModal"><i class="fa fa-gear"></i></a>
                    <a class="nav-link text-primary" href="#" data-toggle="modal" data-target="#LayoutModal">
                        <i class="fa fa-sliders"></i>
                    </a>
                </div>
                <div class="dropdown notifications">
                    <a class="nav-link dropdown-toggle pulse" href="#" role="button" data-toggle="dropdown">
                        <i class="fa fa-bell"></i>
                        <span class="pulse-ring"></span>
                    </a>
                    <div id="NotificationsDiv" class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-end p-0 m-0">
                        <div class="card border-0 w380">
                            <div class="card-header border-0 p-3">
                                <h5 class="mb-0 fw-light d-flex justify-content-between">
                                    <span>Notifications Center</span>
                                    <span class="badge text-muted">14</span>
                                </h5>
                                <ul class="nav nav-tabs mt-3 border-bottom-0" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link fw-light ps-0 me-2 active" data-bs-toggle="tab" href="#Noti-tab-Message" role="tab">Message</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fw-light me-2" data-bs-toggle="tab" href="#Noti-tab-Events" role="tab">Events</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link fw-light" data-bs-toggle="tab" href="#Noti-tab-Logs" role="tab">Logs</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content card-body">
                                <div class="tab-pane fade show active" id="Noti-tab-Message" role="tabpanel">
                                    <ul class="list-unstyled list mb-0">
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar1.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Chris Fox</span> <small>2MIN</small></p>
                                                    <span class="text-muted">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded-circle no-thumbnail">RH</div>
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Robert Hammer</span> <small>13MIN</small></p>
                                                    <span class="text-muted">It is a long established fact that a reader will be distracted</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar3.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Orlando Lentz</span> <small>1HR</small></p>
                                                    <span class="text-muted">There are many variations of passages</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar4.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Barbara Kelly</span> <small>1DAY</small></p>
                                                    <span class="text-muted">Contrary to popular belief <span class="badge bg-danger">Code</span></span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar5.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Robert Hammer</span> <small>13MIN</small></p>
                                                    <span class="text-muted">making it over 2000 years old</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar6.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Orlando Lentz</span> <small>1HR</small></p>
                                                    <span class="text-muted">There are many variations of passages</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <img class="avatar rounded-circle" src="assets/images/xs/avatar7.jpg" alt="">
                                                <div class="flex-fill ms-3">
                                                    <p class="d-flex justify-content-between mb-0 text-muted"><span class="fw-bold;Rose Rivera</span> <small class="">1DAY</small></p>
                                                    <span class="text-muted">The generated Lorem Ipsum</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Noti-tab-Events" role="tabpanel">
                                    <ul class="list-unstyled list mb-0">
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-info-circle fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Campaign <strong class="text-primary">Holiday Sale</strong> is nearly reach budget limit.</p>
                                                    <small class="text-muted">10:00 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
                                                    <small class="text-muted">11:30 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-pie-chart fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Website visits from Twitter is <strong class="text-danger">27% higher</strong> than last week.</p>
                                                    <small class="text-muted">04:00 PM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-warning fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted"><strong class="text-warning">Error</strong> on website analytics configurations</p>
                                                    <small class="text-muted">Yesterday</small>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="py-2 mb-1 border-bottom">
                                            <a href="javascript:void(0);" class="d-flex">
                                                <div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
                                                <div class="flex-fill ms-3">
                                                    <p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
                                                    <small class="text-muted">11:30 AM Today</small>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Noti-tab-Logs" role="tabpanel">
                                    <h4>No Logs right now!</h4>
                                </div>
                            </div>
                            <a class="card-footer text-center border-top-0" href="#"> View all notifications</a>
                        </div>
                    </div>
                </div>
                <div class="dropdown user-profile ms-2 ms-sm-3">
                    <a class="nav-link dropdown-toggle pulse p-0" href="#" role="button" data-toggle="dropdown">
                        <img class="avatar rounded-circle img-thumbnail" src="assets/images/profile_av.png" alt="">
                    </a>
                    <div class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-end p-0 m-0">
                        <div class="card border-0 w240">
                            <div class="card-body border-bottom">
                                <div class="d-flex py-1">
                                    <img class="avatar rounded-circle" src="assets/images/profile_av.png" alt="">
                                    <div class="flex-fill ms-3">
                                        <p class="mb-0 text-muted"><span class="fw-bold;Chris Fox</span></p>
                                        <small class="text-muted">alliegrater@luno.com</small>
                                        <div>
                                            <a href="#" class="card-link">Sign out</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group m-2">
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-user"></i>Profile &amp; account</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-gear"></i>Settings</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-tag"></i>Customization</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-users"></i>Manage team</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-calendar"></i>My Events</a>
                                <a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-credit-card"></i>My Statements</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </nav>

    <div class="sub-header">
        <nav class="navbar navbar-light navbar-expand-lg p-0">
            <div class="container-fluid">

                <!-- menu toggler -->
                <button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse" data-target="#mainHeader">
                    <span class="fa fa-bars"></span>
                </button>

                <!-- main menu -->
                <div class="collapse navbar-collapse order-0 py-1 py-md-2 px-lg-5 px-md-4" id="mainHeader">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#"><i class="fa fa-dashboard me-2"></i><span>Dashboard</span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-slack me-2"></i><span>Apps</span>
                            </a>
                            <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                                <li><a class="dropdown-item" href="#">Calendar</a></li>
                                <li><a class="dropdown-item" href="#">Chat app</a></li>
                                <li><a class="dropdown-item" href="#">Inbox</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-file me-2"></i><span>Pages</span>
                            </a>
                            <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                                <li><a class="dropdown-item" href="profile.html">Profile</a></li>
                                <li><a class="dropdown-item" href="timeline.html">Timeline</a></li>
                                <li><a class="dropdown-item" href="imagegallery.html">Image Gallery</a></li>
                                <li><a class="dropdown-item" href="invoices.html">Invoices</a></li>
                                <li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
                                <li><a class="dropdown-item" href="teamsboard.html">Teams Board</a></li>
                                <li><a class="dropdown-item" href="faqs.html">FAQs</a></li>
                                <li><a class="dropdown-item" href="#">Widget's</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-lock me-2"></i><span>Authentication</span>
                            </a>
                            <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                                <li><a class="dropdown-item" href="auth-signin.html">Sign in</a></li>
                                <li><a class="dropdown-item" href="auth-signup.html">Sign up</a></li>
                                <li><a class="dropdown-item" href="auth-password-reset">Password reset</a></li>
                                <li><a class="dropdown-item" href="auth-two-step">2-Step Authentication</a></li>
                                <li><a class="dropdown-item" href="auth-404">404</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-file-text me-2"></i><span>Docs</span>
                            </a>
                            <ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
                                <li><a class="dropdown-item" href="#">Stater page</a></li>
                                <li><a class="dropdown-item" href="#">Documentation</a></li>
                                <li><a class="dropdown-item" href="#">Changelog</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
    </div>

</div>

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!

<div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
        <h5 class="text-white h4">Collapsed content</h5>
        <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>
Bootstrap modal Bootstrap navs