Sidebar component - 3
COPY
<div class="row g-0">
<div class="col-sm-12 col-md-1">
<nav id="sidebar" class="navigation d-flex flex-column text-center navbar hide-scrollbar w-100">
<!-- Brand -->
<a href="index.html" title="Messenger" class="d-none d-xl-block mb-5 mt-3 text-decoration-none fw-bold">
<img src="/component/images/logo/saltUI-sm.svg" width="40" title="Logo">
</a>
<!-- Nav items -->
<ul class="d-flex nav navbar-nav flex-row flex-xl-column flex-grow-1 justify-content-between justify-content-xl-center align-items-center w-100 py-3 py-lg-2 px-4 px-lg-3" role="tablist">
<li class="nav-item d-none d-xl-block invisible flex-xl-grow-1">
<a class="nav-link py-0 py-lg-5" href="#" title="">
<div class="icon icon-xl">
<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-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
</a>
</li>
<!-- New chat -->
<li class="nav-item">
<a class="nav-link py-0 py-lg-3" id="tab-create-chat" href="#" title="Create chat">
<div class="icon icon-xl">
<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-edit-3">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
</div>
</a>
</li>
<!-- Friends -->
<li class="nav-item">
<a class="nav-link py-0 py-lg-3" id="tab-friends" href="#" title="Friends">
<div class="icon icon-xl">
<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-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
</a>
</li>
<!-- Chats -->
<li class="nav-item">
<a class="nav-link active py-0 py-lg-3" id="tab-chats" href="#" title="Chats">
<div class="icon icon-xl icon-badged 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">
<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 class="badge badge-circle bg-primary badge-msg-n fw-normal">
<span>4</span>
</div>
</div>
</a>
</li>
<!-- Notification -->
<li class="nav-item">
<a class="nav-link py-0 py-lg-3" id="tab-notifications" href="#" title="Notifications">
<div class="icon icon-xl">
<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">
<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>
</a>
</li>
<!-- Support -->
<li class="nav-item d-none d-xl-block flex-xl-grow-1">
<a class="nav-link py-0 py-lg-3" id="tab-support" href="#" title="Support">
<div class="icon icon-xl">
<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-layout">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="9" y1="21" x2="9" y2="9"></line>
</svg>
</div>
</a>
</li>
<!-- Switcher -->
<li class="nav-item d-none d-xl-block">
<a class="switcher-btn nav-link py-0 py-lg-3" href="#" title="Themes">
<div class="switcher-icon switcher-icon-dark icon icon-xl d-none" data-theme-mode="dark">
<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-moon">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
<div class="switcher-icon switcher-icon-light icon icon-xl" data-theme-mode="light">
<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-sun">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</div>
</a>
</li>
<!-- Settings -->
<li class="nav-item">
<a class="nav-link py-0 py-lg-3" id="tab-settings" href="#" title="Settings">
<div class="icon icon-xl">
<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">
<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>
</div>
</a>
</li>
<!-- Profile -->
<li class="nav-item d-none d-xl-block">
<a href="#" class="nav-link p-0 mt-lg-1">
<div class="avatar avatar-online mx-auto">
<i class="bi bi-person-square fs-4"></i>
</div>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-12 col-md-11">
<div class="shadow-sm p-3 m-3 border rounded-1 bg-white h-100vn">
Content
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1c1a28;
--bs-secondary: #1264ff;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bs-secondary);
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #d3d3d3;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #95abb8;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #708491;
}
.navigation {
background: #ffffff;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: auto;
overflow-x: hidden;
}
@media (min-width: 900px) {
.navigation {
width: 100px;
padding: 1.5rem 0;
border: 0;
}
}
@media (min-width: 900px) {
.main,
.navigation,
.sidebar {
height: 100vh;
}
.navigation {
border-right: 2px solid #f5f8fb;
padding: 0 1.25rem;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 58px;
}
}
.nav-link a:hover,
.nav-link svg:hover {
stroke: #0d6efd !important;
}
.badge-msg-n {
position: absolute;
border-radius: 50%;
border: 3px solid #ffffff;
left: 15px;
top: -7px;
}
.h-100vn {
min-height: calc(100vh - 40px) !important;
}
Sidebar component - 4
COPY
<section class="">
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-0 border-end bg-light">
<div class="d-flex flex-column align-items-center align-items-sm-start text-white min-vh-100">
<a href="/" class="mb-md-0 border-bottom w-100">
<img src="/component/images/logo/saltUI.svg" width="60" class="m-4">
</a>
<ul class="nav sidenav nav-pills flex-column mb-5 align-items-center align-items-sm-start px-4 mt-3 w-100 mb-auto" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-5 bi-speedometer2"></i> <span class="ms-2 d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-people-fill"></i> <span class="ms-2 d-none d-sm-inline">Groups</span> </a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-calendar-event-fill"></i> <span class="ms-2 d-none d-sm-inline">Events</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle ">
<i class="fs-5 bi bi-journal-bookmark-fill"></i> <span class="ms-2 d-none d-sm-inline">Documents</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-file-earmark-bar-graph"></i> <span class="ms-2 d-none d-sm-inline">Reports</span>
</a>
</li>
<li class="d-flex">
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-6 bi-people"></i> <span class="ms-2 d-none d-sm-inline">Inbox</span> </a>
<div class="align-self-center ms-auto">
<span class="badge text-bg-danger bg-opacity-25 fw-normal text-danger">19+</span>
</div>
</li>
</ul>
<hr>
<div class="dropdown border-top w-100 position-absolute fixed-bottom">
<a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle mx-3 py-3" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle me-2">
<span class="d-none d-sm-inline mx-1 text-dark me-2">John Daniel</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1c1a28;
--bs-secondary: #1264ff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.nav-link {
text-decoration: none;
color: rgba(var(--bs-primary-rgb), 0.9) !important;
font-weight: 600;
}
.nav-link:hover {
color: rgba(var(--bs-black-rgb), 0.8) !important;
}
.h-100v {
min-height: calc(100vh - 100px) !important;
}
.fs-7 {
font-size: .95rem;
}
.fs-8 {
font-size: .90rem;
}
.sidenav li {
width: 100%;
}
Sidebar component - 2
COPY
<body id="saltUIHtml" class="bg-primary">
<section class="p-1 p-md-3">
<div class="row g-0 flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-0">
<div class="h-100v">
<div class="d-flex flex-column align-items-center align-items-sm-start text-white min-vh-100">
<ul class="nav sidenav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start px-4 mt-3 w-100" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-6 bi-speedometer2"></i> <span class="ms-2 d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-6 bi bi-people-fill"></i> <span class="ms-2 d-none d-sm-inline">Groups</span> </a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-6 bi bi-calendar-event-fill"></i> <span class="ms-2 d-none d-sm-inline">Events</span></a>
</li>
<li class="d-flex">
<a href="#" class="nav-link px-0 align-middle me-auto">
<i class="fs-6 bi bi-journal-bookmark-fill"></i> <span class="ms-2 d-none d-sm-inline">Documents</span></a>
<div class="align-self-center ms-auto">
<span class="badge text-bg-warning bg-opacity-25 fw-normal text-warning">4</span>
</div>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-6 bi bi-file-earmark-bar-graph"></i> <span class="ms-2 d-none d-sm-inline">Reports</span>
</a>
</li>
<li class="d-flex">
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-6 bi-people"></i> <span class="ms-2 d-none d-sm-inline">Customers</span> </a>
<div class="align-self-center ms-auto">
<span class="badge text-bg-danger bg-opacity-25 fw-normal text-danger">19+</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="bg-white h-100 w-100 shadow-sm p-4 border rounded-1">
Content
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1c1a28;
--bs-secondary: #1264ff;
--bs-white: #ffffff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.nav-link {
text-decoration: none;
color: rgba(var(--bs-white-rgb), 0.9) !important;
}
.nav-link:hover {
color: rgba(var(--bs-primary-rgb), 0.8) !important;
}
.h-100v {
height: calc(100vh - 40px) !important;
}
.sidenav li {
width: 100%;
}
Sidebar component - 1
COPY
<section class="p-1 p-md-3">
<div class="row g-2 flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-0">
<div class="h-100v">
<div class="d-flex flex-column align-items-center align-items-sm-start text-white min-vh-100">
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start px-4 mt-3 w-100" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-5 bi-speedometer2"></i> <span class="ms-2 d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-people-fill"></i> <span class="ms-2 d-none d-sm-inline">Groups</span> </a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-calendar-event-fill"></i> <span class="ms-2 d-none d-sm-inline">Events</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle ">
<i class="fs-5 bi bi-journal-bookmark-fill"></i> <span class="ms-2 d-none d-sm-inline">Documents</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi bi-file-earmark-bar-graph"></i> <span class="ms-2 d-none d-sm-inline">Reports</span>
</a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-5 bi-people"></i> <span class="ms-2 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="bg-white h-100 w-100 shadow-sm p-4 border rounded-1">
Content
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1c1a28;
--bs-secondary: #1264ff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.nav-link {
text-decoration: none;
color: rgba(var(--bs-primary-rgb), 0.8) !important;
font-weight: 600;
}
.nav-link:hover {
color: rgba(var(--bs-black-rgb), 0.8) !important;
}
.h-100v {
height: calc(100vh - 40px) !important;
}
More coming soon