Bootstrap Navbars - Adminkit

Discover 2 Bootstrap Navbars available in Adminkit

Navbar Complex

Component from Adminkit Builder
<a class="sidebar-toggle js-sidebar-toggle">
  <i class="hamburger align-self-center"></i>
</a>
<form class="d-none d-sm-inline-block">
  <div class="input-group input-group-navbar">
    <input type="text" class="form-control" placeholder="Search…" aria-label="Search">
    <button class="btn" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search align-middle">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </button>
  </div>
</form>
<ul class="navbar-nav d-none d-lg-block">
  <li class="nav-item px-2 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Mega Menu </a>
    <div class="dropdown-menu dropdown-menu-start dropdown-mega" aria-labelledby="servicesDropdown">
      <div class="d-md-flex align-items-start justify-content-start">
        <div class="dropdown-mega-list">
          <div class="dropdown-header">UI Elements</div>
          <a class="dropdown-item" href="#">Alerts</a>
          <a class="dropdown-item" href="#">Buttons</a>
          <a class="dropdown-item" href="#">Cards</a>
          <a class="dropdown-item" href="#">Carousel</a>
          <a class="dropdown-item" href="#">General</a>
          <a class="dropdown-item" href="#">Grid</a>
          <a class="dropdown-item" href="#">Modals</a>
          <a class="dropdown-item" href="#">Tabs</a>
          <a class="dropdown-item" href="#">Typography</a>
        </div>
        <div class="dropdown-mega-list">
          <div class="dropdown-header">Forms</div>
          <a class="dropdown-item" href="#">Layouts</a>
          <a class="dropdown-item" href="#">Basic Inputs</a>
          <a class="dropdown-item" href="#">Input Groups</a>
          <a class="dropdown-item" href="#">Advanced Inputs</a>
          <a class="dropdown-item" href="#">Editors</a>
          <a class="dropdown-item" href="#">Validation</a>
          <a class="dropdown-item" href="#">Wizard</a>
        </div>
        <div class="dropdown-mega-list">
          <div class="dropdown-header">Tables</div>
          <a class="dropdown-item" href="#">Basic Tables</a>
          <a class="dropdown-item" href="#">Responsive Table</a>
          <a class="dropdown-item" href="#">Table with Buttons</a>
          <a class="dropdown-item" href="#">Column Search</a>
          <a class="dropdown-item" href="#">Muulti Selection</a>
          <a class="dropdown-item" href="#">Ajax Sourced Data</a>
        </div>
      </div>
    </div>
  </li>
</ul>
<div class="navbar-collapse collapse">
  <ul class="navbar-nav navbar-align">
    <li class="nav-item dropdown">
      <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown">
        <div class="position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell align-middle">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
          </svg>
          <span class="indicator">4</span>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
        <div class="dropdown-menu-header"> 4 New Notifications </div>
        <div class="list-group">
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle text-danger">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Update completed</div>
                <div class="text-muted small mt-1">Restart server 12 to complete the update.</div>
                <div class="text-muted small mt-1">30m ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell text-warning">
                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                  <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Lorem ipsum</div>
                <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
                <div class="text-muted small mt-1">2h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home text-primary">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Login from 192.186.1.8</div>
                <div class="text-muted small mt-1">5h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus text-success">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="8.5" cy="7" r="4"></circle>
                  <line x1="20" y1="8" x2="20" y2="14"></line>
                  <line x1="23" y1="11" x2="17" y2="11"></line>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">New connection</div>
                <div class="text-muted small mt-1">Christina accepted your request.</div>
                <div class="text-muted small mt-1">14h ago</div>
              </div>
            </div>
          </a>
        </div>
        <div class="dropdown-menu-footer">
          <a href="#" class="text-muted">Show all notifications</a>
        </div>
      </div>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown">
        <div class="position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square align-middle">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
        <div class="dropdown-menu-header">
          <div class="position-relative"> 4 New Messages </div>
        </div>
        <div class="list-group">
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Vanessa Tucker</div>
                <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
                <div class="text-muted small mt-1">15m ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">William Harris</div>
                <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>
                <div class="text-muted small mt-1">2h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Christina Mason</div>
                <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
                <div class="text-muted small mt-1">4h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Sharon Lessman</div>
                <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
                <div class="text-muted small mt-1">5h ago</div>
              </div>
            </div>
          </a>
        </div>
        <div class="dropdown-menu-footer">
          <a href="#" class="text-muted">Show all messages</a>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-icon js-fullscreen d-none d-lg-block" href="#">
        <div class="position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize align-middle">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
          </svg>
        </div>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-icon pe-md-0 dropdown-toggle" href="#" data-bs-toggle="dropdown">
        <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" class="avatar img-fluid rounded" alt="Charles Hall">
      </a>
      <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="pages-profile.html">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle me-1">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg> Profile </a>
        <a class="dropdown-item" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart align-middle me-1">
            <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
            <path d="M22 12A10 10 0 0 0 12 2v10z"></path>
          </svg> Analytics </a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="pages-settings.html">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle me-1">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
          </svg> Settings &amp; Privacy </a>
        <a class="dropdown-item" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle align-middle me-1">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg> Help Center </a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Log out</a>
      </div>
    </li>
  </ul>
</div>

Navbar Simple

Component from Adminkit Builder
<a class="sidebar-toggle js-sidebar-toggle">
  <i class="hamburger align-self-center"></i>
</a>
<div class="navbar-collapse collapse">
  <ul class="navbar-nav navbar-align">
    <li class="nav-item dropdown">
      <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown">
        <div class="position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell align-middle">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
          </svg>
          <span class="indicator">4</span>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
        <div class="dropdown-menu-header"> 4 New Notifications </div>
        <div class="list-group">
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle text-danger">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Update completed</div>
                <div class="text-muted small mt-1">Restart server 12 to complete the update.</div>
                <div class="text-muted small mt-1">30m ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell text-warning">
                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                  <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Lorem ipsum</div>
                <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
                <div class="text-muted small mt-1">2h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home text-primary">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">Login from 192.186.1.8</div>
                <div class="text-muted small mt-1">5h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus text-success">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="8.5" cy="7" r="4"></circle>
                  <line x1="20" y1="8" x2="20" y2="14"></line>
                  <line x1="23" y1="11" x2="17" y2="11"></line>
                </svg>
              </div>
              <div class="col-10">
                <div class="text-dark">New connection</div>
                <div class="text-muted small mt-1">Christina accepted your request.</div>
                <div class="text-muted small mt-1">14h ago</div>
              </div>
            </div>
          </a>
        </div>
        <div class="dropdown-menu-footer">
          <a href="#" class="text-muted">Show all notifications</a>
        </div>
      </div>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-bs-toggle="dropdown">
        <div class="position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square align-middle">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
        <div class="dropdown-menu-header">
          <div class="position-relative"> 4 New Messages </div>
        </div>
        <div class="list-group">
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Vanessa Tucker</div>
                <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
                <div class="text-muted small mt-1">15m ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">William Harris</div>
                <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>
                <div class="text-muted small mt-1">2h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Christina Mason</div>
                <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
                <div class="text-muted small mt-1">4h ago</div>
              </div>
            </div>
          </a>
          <a href="#" class="list-group-item">
            <div class="row g-0 align-items-center">
              <div class="col-2">
                <img src="https://demo-basic.adminkit.io/img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
              </div>
              <div class="col-10 ps-2">
                <div class="text-dark">Sharon Lessman</div>
                <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
                <div class="text-muted small mt-1">5h ago</div>
              </div>
            </div>
          </a>
        </div>
        <div class="dropdown-menu-footer">
          <a href="#" class="text-muted">Show all messages</a>
        </div>
      </div>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-bs-toggle="dropdown">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
      </a>
      <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall">
        <span class="text-dark">Charles Hall</span>
      </a>
      <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="pages-profile.html">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle me-1">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg> Profile </a>
        <a class="dropdown-item" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart align-middle me-1">
            <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
            <path d="M22 12A10 10 0 0 0 12 2v10z"></path>
          </svg> Analytics </a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="pages-settings.html">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings align-middle me-1">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
          </svg> Settings &amp; Privacy </a>
        <a class="dropdown-item" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle align-middle me-1">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg> Help Center </a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Log out</a>
      </div>
    </li>
  </ul>
</div>