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.

Twitter Sidebar Clone

Bring the sophistication of Twitter's sidebar to your website effortlessly. Learn how to clone Twitter's sidebar design to elevate your site's appearance and user experience

Author: Joe

Preview
Code

<aside class="sidebar">
      <header class="sidebar-header">
        <svg class="logo-img" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 310 310" style="enable-background:new 0 0 310 310;" xml:space="preserve">
<g id="XMLID_826_">
	<path fill="#ffffff" id="XMLID_827_" d="M302.973,57.388c-4.87,2.16-9.877,3.983-14.993,5.463c6.057-6.85,10.675-14.91,13.494-23.73
		c0.632-1.977-0.023-4.141-1.648-5.434c-1.623-1.294-3.878-1.449-5.665-0.39c-10.865,6.444-22.587,11.075-34.878,13.783
		c-12.381-12.098-29.197-18.983-46.581-18.983c-36.695,0-66.549,29.853-66.549,66.547c0,2.89,0.183,5.764,0.545,8.598
		C101.163,99.244,58.83,76.863,29.76,41.204c-1.036-1.271-2.632-1.956-4.266-1.825c-1.635,0.128-3.104,1.05-3.93,2.467
		c-5.896,10.117-9.013,21.688-9.013,33.461c0,16.035,5.725,31.249,15.838,43.137c-3.075-1.065-6.059-2.396-8.907-3.977
		c-1.529-0.851-3.395-0.838-4.914,0.033c-1.52,0.871-2.473,2.473-2.513,4.224c-0.007,0.295-0.007,0.59-0.007,0.889
		c0,23.935,12.882,45.484,32.577,57.229c-1.692-0.169-3.383-0.414-5.063-0.735c-1.732-0.331-3.513,0.276-4.681,1.597
		c-1.17,1.32-1.557,3.16-1.018,4.84c7.29,22.76,26.059,39.501,48.749,44.605c-18.819,11.787-40.34,17.961-62.932,17.961
		c-4.714,0-9.455-0.277-14.095-0.826c-2.305-0.274-4.509,1.087-5.294,3.279c-0.785,2.193,0.047,4.638,2.008,5.895
		c29.023,18.609,62.582,28.445,97.047,28.445c67.754,0,110.139-31.95,133.764-58.753c29.46-33.421,46.356-77.658,46.356-121.367
		c0-1.826-0.028-3.67-0.084-5.508c11.623-8.757,21.63-19.355,29.773-31.536c1.237-1.85,1.103-4.295-0.33-5.998
		C307.394,57.037,305.009,56.486,302.973,57.388z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    <i class="logo-icon uil uil-instagram"></i>
  </header>
  <nav>
    <button>
      <span>
        <i class="material-symbols-outlined"> home </i>
        <span>Home</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined"> tag </i>
        <span>Explore</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined">
          notifications <span>10+</span>
        </i>
        <span>Notifications</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined"> email </i>
        <span>Messages</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined"> bookmark </i>
        <span>Bookmarks</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined"> person </i>
        <span>Profile</span>
      </span>
    </button>
    <button>
      <span>
        <i class="material-symbols-outlined"> expand_circle_down </i>
        <span>More</span>
      </span>
    </button>
    <button class="tweet-button">
      <span>
        <i class="material-symbols-outlined"> add </i>
        <span>Tweet</span>
      </span>
    </button>
    <button class="user-button">
      <span>
        <img src="https://www.frontendcomponent.com/favicon.ico" />
        <span>
          <span class="fullname"> Joe </span>
          <span class="username"> @frontendjoe </span>
        </span>
        <i class="material-symbols-outlined"> more_vert </i>
      </span>
    </button>
  </nav>
</aside>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000000;
  color: #ffffff;
  font-family: 'Inter Var';
}

.material-symbols-outlined {
  font-size: 22px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 250px;
  height: 100%;
  padding: 40px 10px 30px 10px;
  border-right: 1px solid #2f3336;
}

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

.logo-img {
  width: 32px;
  margin-left: 10px;
}

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

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

.sidebar button:hover > span {
  background: rgba(255, 255, 255, 0.08);
}

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

.sidebar button img {
  width: 32px;
  height: 32px;
}

.sidebar button i > span {
  display: grid;
  place-items: center;
  padding: 2px 5px;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  left: 50%;
  translate: -50% 0;
  background: #1d9bf0;
  color: #f9f9f9;
  font-size: 10px;
  font-family: BlinkMacSystemFont;
  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;
}

button.tweet-button {
  text-align: center;
}

button.tweet-button > span {
  background: #1d9bf0;
  width: 100%;
  justify-content: center;
}

button.user-button .fullname {
  font-size: 15px;
}

button.user-button .username {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

button.tweet-button i {
  display: none;
}

button.tweet-button span > span {
  display: block;
}

button.user-button span {
  width: 100%;
}

button.user-button span > span {
  display: grid;
  gap: 4px;
  width: 100%;
}

button.user-button span > i {
  font-size: 20px;
  margin-left: auto;
}

@media (width < 580px) {
  .sidebar {
    width: 72px;
  }

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

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

  button.tweet-button i {
    display: inline-flex;
  }

  button.tweet-button span > span {
    display: none;
  }

  button.user-button span > i {
    display: none;
  }
}

```
No need of JavaScript
```

Sidebar using JavaScript

Explore the versatility of Sidebar implementation using HTML, CSS, and JavaScript, perfect for creating responsive and interactive navigation systems.

Author: Admin

Preview
Code

<nav id='close_nav'>
 <div onclick="toggle_nav()">
   <div class="line"></div>
   <div class="line_1"></div>
   <div class="line_2"></div>
 </div>
 <h1><span>LO</span>GO</h1>
 <ul>
   <li>Discover</li>
   <li>New</li>
   <li class="active">Hot</li>
   <hr>
   <li>Porto</li>
   <li>About</li>
   <li>Contact</li>
   <li>Upload</li>
 </ul>
</nav>

nav {
	position: fixed;
	z-index: 1;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #222;
	transition: 500ms all ease-in-out;
	box-shadow: 1px 0px 12px rgba(0,0,0,0.50);
}
/*logo  */
h1 {
	color: #fff;
	font-size: 40px;
	font-weight: 100;
	letter-spacing: 5px;
	position: absolute;
	margin-left: 100px;
	margin-top: 13px;
}

/*bold part of the logo */
h1 span {
	color: #dc3545;
	font-weight: 400;
}
/*nav toggle  */
nav div {
	z-index: 2;
	position: fixed;
	top: 8px;
	left: 8px;
	width: 60px;
	height: 60px;
	background: transparent;
	border-radius: 20px;
	transition: 500ms all ease-in-out;
}
nav div:hover {
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

p {
	text-align: center;
	color: #fff;
}
hr {
	border-top: 0px solid grey;
	border-bottom: 1px solid grey;
}
div .line {
	position: relative;
	top: 10px;
	width: 30px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_1 {
	position: relative;
	top: 10px;
	width: 20px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_2 {
	position: relative;
	top: 10px;
	width: 15px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}

nav ul {
	margin-top: 120px;	
	font-weight: lighter;
	margin-left: -45px;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
  font-family: 'Comfortaa', cursive;
}

nav ul li {
	color: #fff;
	padding: 20px;
	list-style: none;
	text-decoration: none;
	font-weight: bold;
	transition: 300ms ease-in-out;
}

li:hover{
  background: white;
  color: deepskyblue;
  cursor: pointer;
}

.active {
	background: deepskyblue;
}

let navStatus = true;
function toggle_nav() {
 if (navStatus == true) {
 		document.getElementById('close_nav').style.left = '-300px';
 		navStatus = false;
 	}
 else if (navStatus == false) {
 		document.getElementById('close_nav').style.left = '0';
 		navStatus = true;
 	}
}