Navbar



Main application navbar example 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark h-100">
    <div class="container">
        <a class="navbar-brand" href="/">
            <img src="/img/planet-icon-white.svg" alt="Planet Logo" height="32" width="32" class="brand-logo">
        </a>
        <div class="navbar-collapse collapse d-sm-inline-flex">
            <ul class="navbar-nav flex-grow">
                <li class="nav-item dropdown">
                    <a id="countryDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" class="dropdown-toggle nav-link">
                        <i class="flag flag-ire"></i> IRE <i class="fa function-expand"></i>
                    </a>
                    <div aria-labelledby="countryDropdown" class="dropdown-menu">
                        <a class="dropdown-item ps-2"><i class="flag flag-ire"></i>IRE</a>
                        <a class="dropdown-item ps-2"><i class="flag flag-are"></i>ARE</a>
                        <a class="dropdown-item ps-2"><i class="flag flag-aus"></i>AUS</a>
                    </div>
                </li>
                <li class="divider-vertical"></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="nav-dropdown-label-large text-white">CRM</span>
                        <i class="fa function-expand"></i>
                    </a>
                    <div aria-labelledby="appDropdown" class="dropdown-menu">
                        <a class="dropdown-item text-white" href="#">CRM</a>
                    </div>
                </li>
                <li class="divider-vertical"></li>
                <li class="nav-item link-active">
                    <a class="nav-link text-light" href="#">Retail groups</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Head offices</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">Locations</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">Contacts &amp; users</a>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end">
            <ul class="navbar-nav flex-grow">
                <li class="nav-item">
                    <a target="blank" href="https://planet.atlassian.net/servicedesk/customer/portals" class="nav-link text-light ps-0">
                        <i class="fa fa-lg function-help text-white"></i><span class="small">Help</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light ps-0" href="/user-account/profile">
                        <i class="fa fa-lg function-user text-white"></i><span class="small">Profile</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>