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

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
```

Create a Twitter-like sidebar for your website using HTML and CSS. This comprehensive guide will walk you through the process of integrating and customizing a sidebar similar to Twitter's, ensuring it fits seamlessly into your website's design and functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet for the Twitter sidebar clone. This snippet includes the foundational structure, styles, and functionality needed to create an appealing sidebar experience. Select the code, click the copy button, and paste it into your HTML file where you want the sidebar to appear.

Step 2: Link CSS File

Ensure the necessary CSS files are linked correctly in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles:
<link rel="stylesheet" href="styles.css">
Replace "styles.css" with the actual file names where you have saved your CSS code.

Step 3: Customize and Make it Yours

Personalize the sidebar to match your website's aesthetics and functionality requirements. Adjust the CSS styles to modify the sidebar's appearance, content, and interaction behaviors. Experiment with different styles and features to create a seamless and engaging user experience.

Code Explanation

HTML Code

Sidebar

<aside class="sidebar">

<aside class="sidebar">: This aside element is used to define a section that is related to the content, typically used for sidebars. It has a class of sidebar for styling purposes.

Sidebar Header

<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">
    <!-- SVG content -->
  </svg>
  <i class="logo-icon uil uil-instagram"></i>
</header>

<header class="sidebar-header">: This header section is for the sidebar's header, containing the logo.
<svg class="logo-img">: This svg element represents a vector graphic, which appears to be a logo. The class="logo-img" applies styles to this logo.
: This i element likely uses an icon font, such as the Unicons library, to display an Instagram icon next to the SVG logo.

Navigation Section

<nav>

<nav>: This element contains the navigation links (buttons in this case).

Buttons

Each button has a consistent structure with an icon and a label:

<button>
  <span>
    <i class="material-symbols-outlined"> home </i>
    <span>Home</span>
  </span>
</button>

<button>: Represents a clickable button.
: Groups the icon and text together.
 home : Uses the Material Symbols Outlined icon font to display a home icon.
Home: The text label for the button.

Explore Button

<button>
  <span>
    <i class="material-symbols-outlined"> tag </i>
    <span>Explore</span>
  </span>
</button>

 tag : Displays a tag icon.

Notifications Button

<button>
  <span>
    <i class="material-symbols-outlined">
      notifications <span>10+</span>
    </i>
    <span>Notifications</span>
  </span>
</button>

 notifications 10+ : Displays a notifications icon with a badge indicating "10+" notifications.

Messages Button

<button>
  <span>
    <i class="material-symbols-outlined"> email </i>
    <span>Messages</span>
  </span>
</button>

 email : Displays an email icon.

Bookmarks Button

<button>
  <span>
    <i class="material-symbols-outlined"> bookmark </i>
    <span>Bookmarks</span>
  </span>
</button>

 bookmark : Displays a bookmark icon.

Profile Button

<button>
  <span>
    <i class="material-symbols-outlined"> person </i>
    <span>Profile</span>
  </span>
</button>

 person : Displays a person icon.

More Button

<button>
  <span>
    <i class="material-symbols-outlined"> expand_circle_down </i>
    <span>More</span>
  </span>
</button>

 expand_circle_down : Displays an expand down icon.

Tweet Button

<button class="tweet-button">
  <span>
    <i class="material-symbols-outlined"> add </i>
    <span>Tweet</span>
  </span>
</button>

<button class="tweet-button">: A button specifically styled for tweeting.
 add : Displays an add icon.
Tweet: The label for the button.

User 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>

<button class="user-button">: A button specifically styled for user profile.
<img src="https://www.frontendcomponent.com/favicon.ico" />: Displays the user's profile picture.
 Joe : Displays the user's full name.
 @frontendjoe : Displays the user's username.
 more_vert : Displays a vertical more options icon.

CSS Code

Global Styles

* {
  box-sizing: border-box;
}

*: Applies to all elements. The box-sizing: border-box; property ensures that the padding and border are included in the element's total width and height.

Body Styles

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

body: Removes default margin, sets the background color to black (#000000), text color to white (#ffffff), and uses the 'Inter Var' font family.

Icon Styles

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

.material-symbols-outlined: Sets the font size of elements with this class to 22px, typically used for material icons.

Sidebar Styles

.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: Defines the sidebar with flexbox layout, column direction, aligns items to the start, sets width to 250px, full height, padding, and a right border.

Sidebar Header

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

.sidebar-header: Takes full width and adds a bottom margin.

Logo Styles

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

.logo-img: Sets the width to 32px and adds left margin.

Sidebar Button Styles

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

.sidebar button: Styles all buttons in the sidebar with height 60px, transparent background, no border, no padding, inherits font and color, sets cursor to pointer, and aligns text to the left.

Button Inner Span

.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 > span: Uses inline-flex layout, centers items, sets gap between items, defines height, padding, border-radius, and line height.
Button Hover Effect

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

.sidebar button:hover > span: Adds a semi-transparent white background on hover.

Button Icon Styles

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

.sidebar button i: Positions icons relatively, sets font size, and adds a transition effect.

Button Image Styles

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

.sidebar button img: Sets width and height for images within buttons.

Notification Badge

.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 i > span: Styles notification badges with grid layout, centers items, adds padding, border-radius, positions it absolutely, and sets colors and font styles.

Button Text

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

.sidebar button span: Sets font size for button text.

Sidebar Navigation

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

.sidebar > nav: Uses flex layout, column direction, takes available space, and sets full width.

Last Button

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

.sidebar > nav button:last-child: Moves the last button to the bottom.

Tweet Button

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

button.tweet-button: Centers text in the tweet button.

Tweet Button Span

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

button.tweet-button > span: Styles the inner span with a blue background, full width, and centers content.

User Button Full Name

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

button.user-button .fullname: Sets font size for the full name in the user button.

User Button Username

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

button.user-button .username: Styles the username with a semi-transparent white color and font size.

Hide Icon in Tweet Button

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

button.tweet-button i: Hides the icon in the tweet button.

Show Text in Tweet Button

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

button.tweet-button span > span: Ensures text is displayed in the tweet button.

User Button Span

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

button.user-button span: Sets full width for the user button span.

User Button Inner Span

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

button.user-button span > span: Uses grid layout, sets gap, and full width for the inner span.

User Button Icon

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

button.user-button span > i: Styles the icon with font size and aligns it to the right.

Responsive Design

@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;
  }
}

@media (width < 580px): Applies styles for screens narrower than 580px.
.sidebar: Reduces sidebar width.
.sidebar button > span: Reduces button span width.
.sidebar button > span > span: Hides button text.
button.tweet-button i: Shows the icon in the tweet button.
button.tweet-button span > span: Hides the text in the tweet button.
button.user-button span > i: Hides the icon in the user button.