6+ Sidebar Components - Vanilla CSS

Vanilla CSS sidebar components are simple and lightweight elements that you can add to your website to create a navigation panel or display supplementary content alongside the main content area. These sidebars are built using only CSS, without relying on JavaScript or external frameworks. In this collection, you'll find various designs for sidebars that you can easily incorporate into your website's layout. Whether you prefer a basic sidebar or a more visually appealing style, these Vanilla CSS sidebar components are designed to improve organization and provide a seamless browsing experience for your website visitors.

Sticky Sidebar

Enhance user experience on your website with a sticky sidebar. Learn how to implement a sidebar that remains fixed while users scroll, providing convenient access to navigation options and content.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<nav>
  <span class="material-symbols-outlined"> menu </span>
  Dashboard
  <div>
    <span class="material-symbols-outlined"> search </span>
    <span class="material-symbols-outlined"> settings </span>
    <span class="material-symbols-outlined"> apps </span>
    <span class="material-symbols-outlined"> account_circle </span>
  </div>
</nav>
<header>Products</header>
<section>
  <aside class="filters">
    <h2>Filters</h2>
    <label>
      <input type="checkbox" />
      Trainers
    </label>
    <label>
      <input type="checkbox" />
      Tees
    </label>
    <label>
      <input type="checkbox" />
      Jeans
    </label>
    <label>
      <input type="checkbox" />
      Jackets
    </label>
    <label>
      <input type="checkbox" />
      Socks
    </label>
  </aside>
  <div class="grid">
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
    <div class="grid-item">
      <div class="skeleton"></div>
      <div style="width: 40px" class="skeleton"></div>
    </div>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 56px;
  font-family: "Inter Var";
  background: #3f2d96;
  color: #f9f9f9;
}

nav {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  color: #f9f9f9;
  background: #6245e7;
}

nav span {
  color: #f9f9f9;
  font-size: 22px;
}

nav div {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

section {
  display: flex;
  background: #2b2a31;
  padding: 20px 0;
}

header {
  display: flex;
  align-items: center;
  height: 120px;
  margin: 0;
  padding: 0 20px;
  background: #3f2d96;
  font-weight: 400;
  color: #f9f9f9;
}

.filters {
  position: sticky;
  z-index: 1;
  top: 76px;
  width: 160px;
  height: 100%;
  padding: 0 20px;
}

.filters h2 {
  color: #7d7a7a;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 10px;
}

.filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-size: 14px;
}

.filters input {
  margin: 0;
  accent-color: #6245e7;
}

.grid {
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15vmax;
  padding-right: 20px;
}

.grid-item {
  padding: 20px;
  background: #3d3c46;
}

```
No need of JavaScript
```

Dual Sidebar

Enhance content organization on your website with a dual sidebar layout. Learn how to implement a dual sidebar design to effectively display and navigate through various sections.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet" />

<button type="button" class="burger" onclick="toggleSidebar()"></button>
<aside class="toolbar">
  <nav>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-home.svg" />
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-settings.svg" />
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-folders.svg" />
    </button>
  </nav>
</aside>
<aside class="sidebar">
  <nav>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-blockchain.svg" />
      <span>Blockchick</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-database.svg" />
      <span>DataRiver</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-speaker.svg" />
      <span>AudioVibe</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-acoustic.svg" />
      <span>SoundBlast</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-levels.svg" />
      <span>Levels</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-accounts.svg" />
      <span>Accounts</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-lock.svg" />
      <span>Security</span>
    </button>
  </nav>
</aside>

* {
  box-sizing: border-box;
}

body {
  background: #202124;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.toolbar,
.sidebar,
.burger {
  position: fixed;
  top: 0;
}

.toolbar {
  z-index: 3;
  left: 0;
  width: 72px;
  height: 100%;
  background: #361d74;
  transition: 0.4s;
}

.sidebar {
  z-index: 2;
  left: 72px;
  width: 200px;
  height: 100%;
  background: #442496;
  transition: 0.4s;
}

@media (width < 500px) {
  .sidebar {
    translate: -100% 0;
  }

  body.open .sidebar {
    translate: 0 0;
  }
}

.burger {
  z-index: 1;
  left: 72px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 64px;
  background: url(https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-1/assets/icon-burger.svg) no-repeat center;
}

body.open .burger {
  left: auto;
  right: 0;
  background: url(https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-1/assets/icon-close.svg) no-repeat center;
}

@media (width >= 500px) {
  .burger {
    display: none;
  }
}

.sidebar > nav {
  display: grid;
}

button {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 20px;
}

button > img {
  width: 20px;
  height: 20px;
}

.toolbar img {
  width: 28px;
  height: 28px;
}

.sidebar > nav > button > span {
  border-radius: 4px;
  color: #f9f9f9;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1;
  transition: 0.4s;
}

const toggleSidebar = () => document.body.classList.toggle("open");

Responsive Dashboard with Sidebar

Create a user-friendly dashboard with responsive sidebar navigation. Learn how to design a dashboard layout that adapts seamlessly to different screen sizes.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

<button type="button" class="burger" onclick="toggleSidebar()">
  <img class="burger-avatar" src="https://www.frontendcomponent.com/favicon.ico" />
  <span class="burger-icon"></span>
</button>
<div class="overlay"></div>
<aside class="sidebar">
  <img class="sidebar-avatar" src="https://www.frontendcomponent.com/favicon.ico" />
  <div class="sidebar-username">frontendjoe</div>
  <div class="sidebar-role">Frontend Developer</div>
  <nav class="sidebar-menu">
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-home.svg" />
      <span>Home</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-settings.svg" />
      <span>Settings</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-accounts.svg" />
      <span>Profile</span>
    </button>
  </nav>
  <nav class="sidebar-menu bottom">
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-lock.svg" />
      <span>Sign Out</span>
    </button>
  </nav>
</aside>

<h2>Dashboard</h2>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #202124;
  font-family: "Poppins";
  color: #f9f9f9;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h2 {
  font-size: 16px;
  font-weight: 500;
  padding-left: 20px;
  margin: 22px 0;
}

.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

body.open .overlay {
  opacity: 1;
  visibility: visible;
}

.burger {
  position: fixed;
  z-index: 3;
  top: 20px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (width >= 500px) {
  .burger {
    display: none;
  }
}

.burger-avatar {
  width: 30px;
  height: 30px;
  transition: 0.4s;
}

body.open .burger-avatar {
  translate: 40px 0;
  opacity: 0;
  visibility: hidden;
}

.burger-icon {
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-burger.svg");
  background-repeat: no-repeat;
  background-position: center center;
}

body.open .burger-icon {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-close.svg");
}

.sidebar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  filter: blur(10px);
  transition-property: filter, visibility, opacity;
  transition-duration: 0.6s;
}

@media (width >= 330px) {
  .sidebar {
    transition-property: translate;
  }
}

@media (width >= 400px) {
  .sidebar {
    translate: 100% 0;
    width: 180px;
    transition: 0.4s;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}

@media (width >= 500px) {
  .sidebar {
    translate: 0 0;

    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}

body.open .sidebar {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}

.sidebar-avatar {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.sidebar-username {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
}

.sidebar-role {
  margin: 0 0 20px;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.57);
}

.sidebar-menu {
  display: grid;
  width: 100%;
  padding: 10px 0;
  padding-left: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (width >= 350px) {
  .sidebar-menu {
    padding-left: 0;
  }
}

.sidebar-menu > button {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Poppins";
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1;
  padding: 10px 20px;
}

.sidebar-menu > button > img {
  width: 17px;
  height: 17px;
}

.sidebar-menu > button > span {
  color: #f9f9f9;
  font-size: 11px;
  translate: 0 1px;
}

const toggleSidebar = () => document.body.classList.toggle("open");

Instagram Sidebar Clone

Bring the sleek look of Instagram's sidebar to your website with this easy-to-implement clone. Learn how to clone Instagram's sidebar design to enhance your site's aesthetics and user experience.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

<aside class="sidebar">
  <header class="sidebar-header">
    <svg class="logo-img" width="103" height="29" viewBox="0 0 103 29" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_2365_799)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.57116 0.0993392C3.46866 0.978402 1.16678 3.45246 0.441784 6.5609C-0.482591 10.494 3.35085 12.1525 3.66804 11.6087C4.03054 10.9743 2.97929 10.7568 2.76179 8.70871C2.48991 6.08059 3.71335 3.12621 5.25397 1.83934C5.54397 1.59465 5.52585 1.92996 5.52585 2.54621L5.47147 15.6506C5.47147 18.46 5.35366 19.339 5.14522 20.2181C4.93678 21.1062 4.60147 21.7043 4.84616 21.94C5.13616 22.1937 6.36866 21.5775 7.07553 20.5806C7.8832 19.3486 8.30304 17.9029 8.28085 16.43C8.34429 14.5631 8.33522 11.5997 8.34429 9.91403C8.34429 8.3734 8.37147 3.83309 8.3171 1.10528C8.29897 0.434651 6.44116 -0.263161 5.57116 0.108401V0.0993392ZM80.0015 13.2218C79.9726 14.3975 79.701 15.5545 79.204 16.6203C78.4337 18.179 76.8205 18.6593 76.1318 16.4209C75.7693 15.2065 75.7421 13.1675 76.014 11.4637C76.2858 9.74184 77.0471 8.42778 78.3068 8.54559C79.5574 8.6634 80.1374 10.2675 80.0015 13.2218V13.2218ZM59.0218 22.2662C59.0037 24.6859 58.623 26.8065 57.8074 27.4318C56.6383 28.3018 55.0887 27.6403 55.4058 25.8731C55.6868 24.3143 57.0371 22.7193 59.0308 20.7618L59.0218 22.2662V22.2662ZM58.7046 13.2037C58.6516 14.382 58.3812 15.5403 57.9071 16.6203C57.1368 18.179 55.5146 18.6593 54.8349 16.4209C54.3818 14.8893 54.4905 12.9137 54.7171 11.6631C55.0162 10.05 55.7321 8.54559 57.0099 8.54559C58.2605 8.54559 58.8768 9.90496 58.7046 13.2037V13.2037ZM46.5518 13.1856C46.5288 14.3755 46.2604 15.5479 45.7633 16.6293C44.9658 18.17 43.3799 18.6593 42.6821 16.4209C42.1837 14.8168 42.3558 12.6147 42.5643 11.4365C42.8724 9.66934 43.6518 8.42778 44.8571 8.53653C46.1077 8.6634 46.7058 10.2584 46.5518 13.1856ZM102.241 14.8259C101.942 14.8259 101.797 15.1431 101.688 15.6687C101.289 17.4993 100.872 17.9162 100.329 17.9162C99.7305 17.9162 99.1868 17.01 99.0418 15.1975C98.933 13.7656 98.9512 11.1375 99.0962 8.5184C99.1234 7.98371 98.9693 7.45809 97.5283 6.93246C96.9121 6.7059 96.0058 6.37059 95.5618 7.45809C94.6644 9.5273 94.0311 11.7013 93.6768 13.9287C93.6768 13.9831 93.6043 13.9922 93.5862 13.8743C93.5227 13.0859 93.3505 11.645 93.3324 8.62715C93.3324 8.03809 93.2055 7.53965 92.553 7.13184C92.1271 6.85996 90.8493 6.39778 90.378 6.95059C89.9883 7.40371 89.5262 8.64528 89.0458 10.1043L88.3752 12.0981L88.3843 7.67559C88.3843 7.22246 88.0762 7.0684 87.9765 7.04121C87.4448 6.87721 86.8985 6.76492 86.3452 6.7059C85.9102 6.7059 85.8015 6.95059 85.8015 7.31309C85.8015 7.3584 85.729 11.5272 85.729 14.4453V14.8622C85.4843 16.2034 84.6958 18.025 83.8349 18.025C82.974 18.025 82.5662 17.2637 82.5662 13.7837C82.5662 11.7537 82.6296 10.8747 82.6568 9.40653C82.6749 8.55465 82.7112 7.91121 82.7112 7.76621C82.7021 7.31309 81.9227 7.08653 81.5602 6.9959C81.1977 6.91434 80.8715 6.87809 80.6268 6.89621C80.2643 6.91434 80.0196 7.1409 80.0196 7.45809V7.95653C79.6285 7.33792 79.0462 6.86382 78.3612 6.60621C77.0562 6.21653 75.6968 6.5609 74.6727 7.99278C73.7888 9.25722 73.2685 10.7398 73.1683 12.2793C73.0233 13.6387 73.0777 15.0072 73.3224 16.1762C73.0233 17.4812 72.4524 18.025 71.8362 18.025C70.939 18.025 70.2955 16.5568 70.368 14.0375C70.4224 12.37 70.7487 11.2009 71.1112 9.51528C71.2652 8.79028 71.1474 8.42778 70.8302 8.06528C70.5402 7.72996 69.924 7.55778 69.0268 7.76621C68.3924 7.91121 67.4862 8.07434 66.6705 8.19215C66.6705 8.19215 66.7158 8.00184 66.7612 7.6484C66.9696 5.80871 64.9668 5.95371 64.3233 6.54278C63.9427 6.89621 63.689 7.30403 63.5802 8.05621C63.4262 9.23434 64.3958 9.78715 64.3958 9.78715C63.7731 12.1394 62.7291 14.3594 61.3146 16.3393V15.705C61.3055 12.66 61.3418 10.2675 61.3599 9.40653C61.378 8.55465 61.4143 7.92934 61.4143 7.77528C61.4143 7.44903 61.2149 7.32215 60.8162 7.16809C60.4537 7.02309 60.0368 6.93246 59.6018 6.89621C59.058 6.8509 58.7227 7.1409 58.7318 7.48528V7.95653C58.3389 7.33593 57.753 6.86153 57.0643 6.60621C55.7593 6.21653 54.3999 6.5609 53.3758 7.99278C52.5236 9.26987 52.0062 10.7408 51.8715 12.2703C51.7355 13.6931 51.7537 14.8984 51.953 15.9315C51.7446 16.9556 51.1465 18.0159 50.4758 18.0159C49.6149 18.0159 49.1165 17.2637 49.1165 13.7837C49.1165 11.7537 49.1799 10.8747 49.2071 9.40653C49.2252 8.55465 49.2615 7.91121 49.2615 7.76621C49.2615 7.31309 48.473 7.08653 48.1105 6.9959C47.7299 6.90528 47.3946 6.87809 47.1499 6.90528C46.8146 6.9234 46.579 7.22246 46.579 7.44903V7.95653C46.186 7.33593 45.6002 6.86153 44.9115 6.60621C43.6065 6.21653 42.2562 6.56996 41.223 7.99278C40.5433 8.92621 39.9996 9.95934 39.7187 12.2522C39.6426 12.8654 39.6062 13.4829 39.6099 14.1009C39.338 15.7412 38.1508 17.6353 37.1812 17.6353C36.6102 17.6353 36.0665 16.5387 36.0665 14.1915C36.0665 11.065 36.2658 6.61528 36.293 6.18934L37.7612 6.16215C38.3774 6.16215 38.9302 6.17121 39.7458 6.1259C40.1537 6.10778 40.5433 4.63965 40.1265 4.4584C39.9362 4.37684 38.5858 4.30434 38.0421 4.29528C37.589 4.28621 36.3383 4.19559 36.3383 4.19559C36.3383 4.19559 36.4562 1.24121 36.4833 0.933089C36.5015 0.661214 36.1662 0.534339 35.9668 0.452777C35.5195 0.272736 35.0548 0.139118 34.5802 0.0540265C33.8915 -0.081911 33.5833 0.0540264 33.5199 0.634026C33.4293 1.51309 33.384 4.0959 33.384 4.0959C32.8765 4.0959 31.1455 3.99621 30.6471 3.99621C30.1758 3.99621 29.6683 6.00809 30.3208 6.03528L33.2208 6.11684L33.1937 12.0347V12.4606C32.7133 14.9347 31.0458 16.2668 31.0458 16.2668C31.4083 14.6356 30.6652 13.4122 29.3512 12.37C28.8618 11.9893 27.9012 11.2643 26.8227 10.4668C26.8227 10.4668 27.448 9.85059 28.0008 8.61809C28.3905 7.74809 28.4087 6.75121 27.448 6.53371C25.8621 6.16215 24.548 7.32215 24.1583 8.57278C24.0063 8.97762 23.9681 9.4164 24.048 9.84141C24.1279 10.2664 24.3228 10.6614 24.6115 10.9834L24.7474 11.1556C24.3849 11.8443 23.8955 12.7687 23.4787 13.4937C22.3277 15.4875 21.4487 17.0734 20.7871 17.0734C20.2615 17.0734 20.2705 15.4693 20.2705 13.965C20.2705 12.669 20.3612 10.7206 20.4427 8.70871C20.4699 8.03809 20.1346 7.65746 19.5727 7.31309C19.1259 7.00402 18.6198 6.79108 18.0865 6.68778C17.4521 6.68778 15.6396 6.7784 13.9177 11.7356C13.7093 12.3609 13.2833 13.4937 13.2833 13.4937L13.3196 7.53965C13.3196 7.39465 13.2471 7.26778 13.0749 7.17715C12.5341 6.88964 11.9374 6.72269 11.3258 6.68778C10.9996 6.68778 10.8365 6.84184 10.8365 7.1409L10.773 16.4753C10.773 17.1822 10.7912 18.0068 10.8637 18.3693C10.9362 18.7318 11.0449 19.0218 11.1899 19.194C11.3258 19.3753 11.489 19.5022 11.7518 19.5565C12.0055 19.6109 13.3649 19.7831 13.4374 19.2665C13.528 18.6412 13.528 17.9706 14.244 15.4603C15.3496 11.5543 16.7996 9.64215 17.4883 8.97153C17.6062 8.84465 17.7421 8.84465 17.733 9.03496L17.5337 13.8562C17.3524 18.7228 18.2405 19.62 19.5002 19.62C20.4699 19.62 21.8383 18.6593 23.3065 16.2306L25.7533 12.1525L27.1852 13.4756C28.3452 14.5631 28.7258 15.6143 28.4721 16.6022C28.2818 17.3543 27.5477 18.1428 26.2608 17.3815C25.8802 17.155 25.7171 16.9828 25.3455 16.7381C25.1371 16.6022 24.829 16.5568 24.6387 16.7018C24.1583 17.0643 23.8774 17.5356 23.7233 18.1065C23.5693 18.6593 24.1312 18.9584 24.7112 19.2122C25.2096 19.4387 26.288 19.6381 26.9768 19.6653C29.6412 19.7559 31.7799 18.3784 33.2662 14.8259C33.538 17.889 34.6708 19.629 36.6374 19.629C37.9515 19.629 39.2746 17.9253 39.8546 16.2578C40.0177 16.9375 40.2624 17.5265 40.5796 18.034C42.1021 20.4356 45.0474 19.91 46.5246 17.8709C46.9777 17.2456 47.0502 17.019 47.0502 17.019C47.0945 17.7052 47.3912 18.3506 47.8832 18.8309C48.3752 19.3112 49.0276 19.5923 49.7146 19.62C50.7115 19.62 51.7355 19.1487 52.4605 17.5265C52.5421 17.7078 52.6418 17.8709 52.7324 18.034C54.2549 20.4356 57.2002 19.91 58.6774 17.8709L58.8587 17.6172L58.904 18.8859L57.5446 20.1275C55.2608 22.2118 53.5208 23.7978 53.394 25.6465C53.2308 28.0028 55.143 28.8728 56.593 28.9906C57.3183 29.0267 58.04 28.8685 58.6837 28.5323C59.3273 28.1962 59.8695 27.6942 60.2543 27.0784C60.9612 26.0362 61.4324 23.7887 61.3962 21.5684L61.3418 18.3422C63.5126 15.8319 65.1802 12.9274 66.2537 9.78715C66.2537 9.78715 67.0965 9.79621 67.9937 9.74184C68.2837 9.72371 68.3652 9.77809 68.3108 9.98653C68.2474 10.2403 67.178 14.3728 68.1568 17.1278C68.8274 19.0128 70.3318 19.62 71.238 19.62C72.2802 19.62 73.2862 18.8315 73.8208 17.6534L74.0293 18.034C75.5518 20.4356 78.488 19.91 79.9743 17.8709C80.3096 17.4178 80.4999 17.019 80.4999 17.019C80.8262 19.0128 82.3758 19.629 83.264 19.629C84.1883 19.629 85.0765 19.2484 85.7833 17.5628C85.8105 18.3059 85.8558 18.9131 85.9283 19.1034C85.9737 19.2212 86.2365 19.3753 86.4358 19.4387C87.2787 19.7468 88.1396 19.6018 88.4658 19.5384C88.6833 19.4931 88.8555 19.3118 88.8827 18.8587C88.9462 17.6534 88.9099 15.6325 89.2724 14.1372C89.8796 11.6087 90.4505 10.63 90.7224 10.1497C90.8765 9.87778 91.0487 9.83246 91.0577 10.1225C91.0668 10.7025 91.094 12.4062 91.3296 14.699C91.5108 16.3847 91.7465 17.3815 91.9187 17.6897C92.4352 18.5959 93.0696 18.6412 93.5771 18.6412C93.9033 18.6412 94.5921 18.5506 94.5287 17.9797C94.5015 17.6987 94.5468 15.9678 95.163 13.4847C95.5527 11.8625 96.2052 10.4034 96.4408 9.85965C96.5315 9.66934 96.5768 9.8234 96.5768 9.85965C96.5224 10.9653 96.4137 14.6175 96.8668 16.6203C97.483 19.3209 99.2683 19.629 99.8937 19.629C101.226 19.629 102.313 18.614 102.676 15.9587C102.766 15.3243 102.631 14.8259 102.241 14.8259V14.8259Z" fill="black"/>
      </g>
      <defs>
      <clipPath id="clip0_2365_799">
      <rect width="103" height="29" fill="white"/>
      </clipPath>
      </defs>
      </svg>
      <i class="logo-icon uil uil-instagram"></i>
  </header>
  <nav>
    <button>
      <span>
        <i class="uil uil-estate"></i>
        <span>Home</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-search"></i>
        <span>Search</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-compass"></i>
        <span>Explore</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-location-arrow">
          <span>13</span>
        </i>
        <span>Messages</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-heart">
          <em></em>
        </i>
        <span>Notifications</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-plus-circle"> </i>
        <span>Create</span>
      </span>
    </button>
    <button>
      <span>
        <img src="https://www.frontendcomponent.com/favicon.ico" />
        <span>Profile</span>
      </span>
    </button>
    <button>
      <span>
        <i class="uil uil-bars"> </i>
        <span>More</span>
      </span>
    </button>
  </nav>
</aside>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fafafa;
  color: #262626;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 250px;
  height: 100%;
  padding: 40px 10px 30px 10px;
  background: #ffffff;
  border-right: 1px solid #dbdbdb;
  transition: 0.3s;
}

.sidebar-header {
  width: 100%;
  margin-bottom: 10px;
}

.logo-icon {
  display: none;
  font-size: 28px;
  height: 35px;
  width: 51px;
  text-align: center;
}

.logo-img {
  margin-left: 14px;
  height: 32px;
}

.sidebar button {
  height: 60px;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.sidebar button > span {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 12px;
  border-radius: 24px;
  line-height: 1;
}

.sidebar button:hover > span {
  background: #f2f2f2;
}

.sidebar button:hover > span :is(i, img) {
  scale: 1.05;
}

.sidebar button > span > span {
  transition: 0.3s;
}

@media (width < 580px) {
  .logo-img {
    display: none;
  }

  .logo-icon {
    display: block;
  }

  .sidebar {
    width: 72px;
  }

  .sidebar button > span {
    width: 50px;
  }

  .sidebar button > span > span {
    opacity: 0;
    visibility: hidden;
  }
}

.sidebar button i {
  position: relative;
  font-size: 28px;
  transition: 0.2s;
}

.sidebar button img {
  width: 28px;
  height: 28px;
  transition: 0.2s;
}

.sidebar button i > span {
  display: grid;
  place-items: center;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  right: -10px;
  border: 1px solid #ffffff;
  background: #ff2f40;
  color: #f9f9f9;
  font-size: 12px;
  font-style: normal;
}

.sidebar button i > em {
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  right: -1px;
  border: 1px solid #ffffff;
  background: #ff2f40;
  color: #f9f9f9;
  font-size: 12px;
  font-style: normal;
}

.sidebar button span {
  font-size: 17px;
}

.sidebar > nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar > nav button:last-child {
  margin-top: auto;
}

```
No need of JavaScript
```

Sidebar Tabs

Simplify user navigation on your website with sidebar tabs. Learn how to integrate tabbed navigation into your sidebar layout to access different sections or pages easily.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/>

<aside class="sidebar">
  <div class="tabs">
    <input id="tab-1" type="radio" name="group" />
    <input id="tab-2" type="radio" name="group" />
    <input id="tab-3" type="radio" name="group" />

    <div class="buttons">
      <label class="material-symbols-outlined" for="tab-1"> menu </label>
      <label class="material-symbols-outlined" for="tab-2"> lock </label>
      <label class="material-symbols-outlined" for="tab-3">
        settings
      </label>
      <div class="underline"></div>
    </div>

    <div class="content">
      <div class="content-inner">
        <div>
          <h2>Home</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
        <div>
          <h2>Account</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
        <div>
          <h2>Settings</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
      </div>
    </div>
  </div>
</aside>

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #8f44fd;
  --tab-width: 240px;
  --button-width: 80px;
}

html,
body,
.wrapper {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  font-family: "Euclid Circular A";
  line-height: 1.5;
  background: #24262a;
  color: #f9f9f9;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--tab-width);
  background: #17181a;
}

input {
  display: none;
}

h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 400;
}

.content {
  position: relative;
  overflow: hidden;
  height: 140px;
}

.content-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(var(--tab-width) * 3);
  transition: 0.3s;
}

.content-inner > div {
  width: inherit;
  padding: 20px;
}

label {
  text-align: center;
  padding: 20px 0;
  font-size: 15px;
  width: var(--button-width);
  opacity: 0.35;
  cursor: pointer;
}

p {
  margin: 0;
  font-size: 14px;
  color: #888889;
}

.buttons {
  position: relative;
  display: flex;
  border-bottom: 1px solid #575757;
}

.underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--button-width);
  height: 3px;
  background: var(--color-primary);
  transition: 0.2s;
}

.tabs input:nth-child(1):checked ~ .buttons .underline {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .buttons .underline {
  translate: var(--button-width) 0;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  translate: calc(var(--button-width) * 2) 0;
}

.tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
.tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
.tabs input:nth-child(3):checked ~ .buttons label:nth-child(3) {
  opacity: 1;
}

.tabs input:nth-child(1):checked ~ .content > .content-inner {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .content > .content-inner {
  translate: calc(0px - var(--tab-width)) 0;
}

.tabs input:nth-child(3):checked ~ .content > .content-inner {
  translate: calc(0px - var(--tab-width) * 2) 0;
}

```
No need of JavaScript
```