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.

Create an Instagram-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 Instagram'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 Instagram sidebar clone. This snippet includes the foundational structure and styles needed to create a visually appealing and functional sidebar. 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 and Unicons Icons Library

  • Ensure the necessary CSS and Unicons icons library are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and icons:
  • <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  • Replace "styles.css" with the actual file name 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, icons, and features to create a seamless and engaging user experience inspired by Instagram's sidebar design.

By following these steps, you can implement and customize an Instagram-like sidebar on your website using HTML and CSS. Make the sidebar component your own by tweaking styles, adjusting icons, and adding functionalities to create a visually appealing and user-friendly navigation experience.

Steps to Copy the Code

HTML Code

Sidebar Structure (<aside>):
  • The <aside> element is used to define a sidebar section typically found in layouts for navigation or supplementary content.
Logo Section (<header class="sidebar-header">):
  • Contains the logo for the application. It includes an SVG graphic (<svg>) representing the logo image and an <i> element for displaying an Instagram icon using the Unicons (uil uil-instagram) icon library.
Navigation Section (<nav>):
  • This section houses navigation buttons (<button> elements) for different sections of the application.
  • Each <button> contains:
    • An icon (<i>) from the Unicons library (uil uil-*), represents different actions or pages.
    • A <span> with text describing the action or page associated with the icon.

CSS Code

Universal Box Sizing
* {
  box-sizing: border-box;
}
  • This sets the box-sizing property to border-box for all elements. This ensures that padding and border are included in the element's total width and height.
Body Styles
body {
  margin: 0;
  background: #fafafa;
  color: #262626;
}
  • Sets the margin of the body to 0 to remove any default spacing.
  • Sets a light gray background color (#fafafa) and a dark gray text color (#262626) for the body.
Sidebar Styles
.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;
}
  • Creates a sidebar with a width of 250px and full height of the viewport.
  • Uses flexbox (display: flex) to stack elements vertically (flex-direction: column) and align them to the start of the sidebar (align-items: flex-start).
  • Provides padding inside the sidebar for content.
  • Has a white background (#ffffff) with a right border (border-right) of 1px solid light gray (#dbdbdb).
  • Applies a smooth transition effect (transition: 0.3s) for animations.
Sidebar Header
.sidebar-header {
  width: 100%;
  margin-bottom: 10px;
}
  • Sets the header width to 100% of its container.
  • Adds a bottom margin of 10px to create space between the header and subsequent elements.
Logo Styles
.logo-icon {
  display: none;
  font-size: 28px;
  height: 35px;
  width: 51px;
  text-align: center;
}

.logo-img {
  margin-left: 14px;
  height: 32px;
}
  • Defines styles for a logo icon and image.
  • .logo-icon is initially hidden (display: none) and styled with specific dimensions and alignment.
  • .logo-img specifies margin and height for the logo image.
Sidebar Button Styles
.sidebar button {
  height: 60px;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
  • Styles buttons within the sidebar.
  • Sets a fixed height (height: 60px) with no background or border (background: transparent; border: 0;).
  • Removes default padding (padding: 0) and inherits font and color from parent elements (font-family: inherit; color: inherit;).
  • Changes cursor to pointer (cursor: pointer;) to indicate interactivity.
Media Query for Responsive Design
@media (max-width: 580px) {
  /* Styles applied when the viewport width is less than 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;
  }
}
  • Defines styles that apply only when the viewport width is less than 580px.
  • Hides .logo-img and displays .logo-icon for a smaller layout.
  • Narrows the sidebar (width: 72px;) to conserve space.
  • Adjusts button span width and hides nested span elements for a compact design.
Button Icon and Image Styles
.sidebar button i {
  position: relative;
  font-size: 28px;
  transition: 0.2s;
}

.sidebar button img {
  width: 28px;
  height: 28px;
  transition: 0.2s;
}
  • Styles icons (<i>) and images (<img>) within buttons.
  • Sets a relative position and transition effect for icons.
  • Specifies dimensions and transition for images.
Button Badge Styles
.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;
}
  • Styles for badge elements (<span> and <em>) within icons.
  • Applies specific dimensions, position, colors, and border-radius for badges.
Additional Styles
.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;
}
  • Sets font size for text within buttons.
  • Defines styles for a navigation section within the sidebar, using flexbox for layout.
  • Pushes the last button to the bottom of the sidebar using margin-top: auto.