Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Chakra UI Dashboard Riva Dashboard Tailwind Asteria Dashboard Soft UI Dashboard Tailwind Motion Landing Library Soft UI Dashboard Motion Landing Library React AdminKit Argon Dashboard Soft UI Design System
All 380
Forms 9
Navbars 27
Sidebars 19
Components 27
Tables 24
Teams Section 8
Typography 24
Headers 30
Cards 38
Cards Section 28
Contacts Section 9
Profiles Section 8
Charts 14
Tables Section 11
Projects Section 10
Charts Section 4
Testimonials 9
Faq 1
Blogs 11
Contents 10
Stats 4
Authentication 7
Features 16
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4

Bootstrap - All Components

Discover 380 Bootstrap components available in Loopple

Card Project User

Component from Soft UI Dashboard Builder

Section Teams Social Image Right

Component from Soft UI Dashboard Builder

Section Teams Social

Component from Soft UI Dashboard Builder

Nav Pills

Component from Adminkit Builder 
<ul class="nav nav-pills mb-3 draggable" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <p>This is the last time a fiat currency bubble pops, because it’s the first time we have a viable alternative.</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      <p>Live long enough, and you’ll become a philosopher.</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <p>It’s the nature of truth that once you see it, you can’t unsee it.</p>
  </div>
</div>
Requires JavaScript

Section Charts

Component from Adminkit Builder 
<div class="row removable">
  <div class="col-12 col-lg-6 drop-zone">
    <div class="card flex-fill w-100 draggable">
      <div class="card-header">
        <h5 class="card-title">Line Chart</h5>
        <h6 class="card-subtitle text-muted">A line chart is a way of plotting data points on a line.</h6>
      </div>
      <div class="card-body">
        <div class="chart">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-line" style="display: block; height: 300px; width: 428px;" width="856" height="600" class="chart-line-double chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 drop-zone">
    <div class="card draggable">
      <div class="card-header">
        <h5 class="card-title">Bar Chart</h5>
        <h6 class="card-subtitle text-muted">A bar chart provides a way of showing data values represented as vertical bars.</h6>
      </div>
      <div class="card-body">
        <div class="chart">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-bar" width="856" height="600" style="display: block; height: 300px; width: 428px;" class="chart-bar chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
var chartsLineDouble = document.querySelectorAll(".chart-line-double");

  chartsLineDouble.forEach(function(chart) {
    if (!chart.getAttribute('data-chart-initialized')) {
      new Chart(chart, {
        type: "line",
        data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                label: "Sales ($)",
                fill: true,
                backgroundColor: "transparent",
                borderColor: window.theme.primary,
                data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327]
            }, {
                label: "Orders",
                fill: true,
                backgroundColor: "transparent",
                borderColor: "#adb5bd",
                borderDash: [4, 4],
                data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827]
            }]
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            tooltips: {
                intersect: false
            },
            hover: {
                intersect: true
            },
            plugins: {
                filler: {
                    propagate: false
                }
            },
            scales: {
                xAxes: [{
                    reverse: true,
                    gridLines: {
                        color: "rgba(0,0,0,0.05)"
                    }
                }],
                yAxes: [{
                    ticks: {
                        stepSize: 500
                    },
                    display: true,
                    borderDash: [5, 5],
                    gridLines: {
                        color: "rgba(0,0,0,0)",
                        fontColor: "#fff"
                    }
                }]
            }
        }
      });
     chart.setAttribute("data-chart-initialized", "true");
    }
  });

var chartsBar = document.querySelectorAll(".chart-bar");

  chartsBar.forEach(function(chart) {
    if (!chart.getAttribute('data-chart-initialized')) {
  
      new Chart(chart, {
      	type: "bar",
      	data: {
      		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      		datasets: [{
      			label: "Last year",
      			backgroundColor: window.theme.primary,
      			borderColor: window.theme.primary,
      			hoverBackgroundColor: window.theme.primary,
      			hoverBorderColor: window.theme.primary,
      			data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
      			barPercentage: .75,
      			categoryPercentage: .5
      		}, {
      			label: "This year",
      			backgroundColor: "#dee2e6",
      			borderColor: "#dee2e6",
      			hoverBackgroundColor: "#dee2e6",
      			hoverBorderColor: "#dee2e6",
      			data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
      			barPercentage: .75,
      			categoryPercentage: .5
      		}]
      	},
      	options: {
      		maintainAspectRatio: false,
      		legend: {
      			display: false
      		},
      		scales: {
      			yAxes: [{
      				gridLines: {
      					display: false
      				},
      				stacked: false,
      				ticks: {
      					stepSize: 20
      				}
      			}],
      			xAxes: [{
      				stacked: false,
      				gridLines: {
      					color: "transparent"
      				}
      			}]
      		}
      	}
      }); 
      chart.setAttribute("data-chart-initialized", "true");
    }
  });
</script>

Card Profile

Component from Adminkit Builder 
<div class="card draggable mb-3">
  <div class="card-header">
    <h5 class="card-title mb-0">Profile Details</h5>
  </div>
  <div class="card-body text-center">
    <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
    <h5 class="card-title mb-0">Christina Mason</h5>
    <div class="text-muted mb-2">Lead Developer</div>
    <div>
      <a class="btn btn-primary btn-sm" href="#">Follow</a>
      <a class="btn btn-primary btn-sm" 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-message-square">
          <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> Message </a>
    </div>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">Skills</h5>
    <a href="#" class="badge bg-primary me-1 my-1">HTML</a>
    <a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
    <a href="#" class="badge bg-primary me-1 my-1">Sass</a>
    <a href="#" class="badge bg-primary me-1 my-1">Angular</a>
    <a href="#" class="badge bg-primary me-1 my-1">Vue</a>
    <a href="#" class="badge bg-primary me-1 my-1">React</a>
    <a href="#" class="badge bg-primary me-1 my-1">Redux</a>
    <a href="#" class="badge bg-primary me-1 my-1">UI</a>
    <a href="#" class="badge bg-primary me-1 my-1">UX</a>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">About</h5>
    <ul class="list-unstyled mb-0">
      <li class="mb-1">
        <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 feather-sm me-1">
          <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> Lives in <a href="#">San Francisco, SA</a>
      </li>
      <li class="mb-1">
        <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-briefcase feather-sm me-1">
          <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
          <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
        </svg> Works at <a href="#">GitHub</a>
      </li>
      <li class="mb-1">
        <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-map-pin feather-sm me-1">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg> From <a href="#">Boston</a>
      </li>
    </ul>
  </div>
</div>

Table Excel

Component from Adminkit Builder 
<div class="card table-responsive draggable">
    <div class="card-header border-bottom-0">
        <h5>Table Excel</h5>
    </div>
    <table class="table" data-integration="excel">
        <thead>
            <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
            </tr>
            <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
            </tr>
            <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Sidebar Simple

Component from Adminkit Builder 
<div class="sidebar-content js-simplebar" data-simplebar="init">
  <div class="simplebar-wrapper" style="margin: 0px;">
    <div class="simplebar-height-auto-observer-wrapper">
      <div class="simplebar-height-auto-observer"></div>
    </div>
    <div class="simplebar-mask">
      <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
        <div class="simplebar-content-wrapper" style="height: 100%; overflow: hidden;">
          <div class="simplebar-content" style="padding: 0px;">
            <a class="sidebar-brand" href="javascript:;">
              <span class="align-middle">AdminKit</span>
            </a>
            <ul class="sidebar-nav">
              <li class="sidebar-header"> Pages </li>
              <li class="sidebar-item active">
                <a class="sidebar-link" href="javascript:;">
                  <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-sliders align-middle">
                    <line x1="4" y1="21" x2="4" y2="14"></line>
                    <line x1="4" y1="10" x2="4" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="12"></line>
                    <line x1="12" y1="8" x2="12" y2="3"></line>
                    <line x1="20" y1="21" x2="20" y2="16"></line>
                    <line x1="20" y1="12" x2="20" y2="3"></line>
                    <line x1="1" y1="14" x2="7" y2="14"></line>
                    <line x1="9" y1="8" x2="15" y2="8"></line>
                    <line x1="17" y1="16" x2="23" y2="16"></line>
                  </svg>
                  <span class="align-middle">Dashboard</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a class="sidebar-link" href="javascript:;">
                  <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">
                    <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>
                  <span class="align-middle">Profile</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a class="sidebar-link" href="javascript:;">
                  <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-log-in align-middle">
                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                    <polyline points="10 17 15 12 10 7"></polyline>
                    <line x1="15" y1="12" x2="3" y2="12"></line>
                  </svg>
                  <span class="align-middle">Sign In</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a class="sidebar-link" href="javascript:;">
                  <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 align-middle">
                    <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>
                  <span class="align-middle">Sign Up</span>
                </a>
              </li>
              <li class="sidebar-item">
                <a class="sidebar-link" href="javascript:;">
                  <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-book align-middle">
                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                  </svg>
                  <span class="align-middle">Blank</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="simplebar-placeholder" style="width: auto; height: 872px;"></div>
  </div>
  <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
    <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div>
  </div>
  <div class="simplebar-track simplebar-vertical" style="visibility: hidden;">
    <div class="simplebar-scrollbar" style="height: 0px; transform: translate3d(0px, 0px, 0px); display: none;"></div>
  </div>
</div>

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>