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.

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

Create interactive sidebar tabs for your website using HTML and CSS. This comprehensive guide will walk you through the process of integrating and customizing sidebar tabs, ensuring they fit 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 sidebar tabs. This snippet includes the foundational structure and styles needed to create visually appealing and functional tabs. Select the code, click the copy button, and paste it into your HTML file where you want the sidebar tabs to appear.

Step 2: Link CSS and Material Symbols Outlined

Ensure the necessary CSS and Material Symbols Outlined are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and Material Symbols:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">

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 tabs to match your website's aesthetics and functionality requirements. Adjust the CSS styles to modify the tabs' appearance, content, and interaction behaviors. Experiment with different styles, icons, and features to create a seamless and engaging user experience.

By following these steps, you can implement and customize sidebar tabs on your website using HTML and CSS. Make the sidebar tabs your own by tweaking styles, adding icons, and adjusting functionalities to create a seamless and visually appealing interaction that enhances user engagement and usability.

Code Explanation

HTML Code

Sidebar (`<aside class="sidebar">`):

Acts as a container for the entire sidebar and its contents.

Tabs Container (`<div class="tabs">`):

Contains all elements related to the tabs functionality.

Tab Inputs (`<input type="radio">`):

These radio inputs (<input id="tab-1" type="radio" name="group" />, <input id="tab-2" type="radio" name="group" />, <input id="tab-3" type="radio" name="group" />) serve as the actual tabs.
They are grouped by the name="group" attribute, ensuring only one tab can be selected at a time.

Tab Labels (`<label for="tab-N">`):

Each <label> corresponds to a tab input (<input>).
They are styled as buttons using the class .material-symbols-outlined and display icons (menu, lock, settings).
Clicking on a label switches the corresponding tab input, activating the associated content.

Underline (`<div class="underline"></div>`):

A visual indicator under the active tab label. It moves horizontally to indicate the currently active tab.

Content Area (`<div class="content">`):

Contains the actual content for each tab.
Only one of these content sections is visible at a time, depending on which tab is active.

Content Inner (`<div class="content-inner">`):

Wraps the individual content sections for each tab.

Tab Content (`<div>` inside .content-inner):

Each <div> represents a tab's content section.
Contains a <h2> heading indicating the tab's name (Home, Account, Settings) and a <p> paragraph for additional details.

CSS Code

Global Styles

* {
  box-sizing: border-box;
}

box-sizing: border-box; ensures that padding and border are included in the element's total width and height calculation, rather than adding to it.

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

:root sets CSS custom properties (variables) that can be used throughout the stylesheet.
--color-primary, --tab-width, and --button-width are defined to store the primary color, tab width, and button width respectively.

Body and Wrapper Styling

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

Sets the height of the html, body, and .wrapper elements to 100%, ensuring the sidebar and its contents take up the full viewport height.

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

Styles the body element:
display: grid; place-items: center; centers content vertically and horizontally.
margin: 0; removes default body margin.
font-family: "Euclid Circular A"; sets the font family.
line-height: 1.5; sets the line height for readability.
background: #24262a; color: #f9f9f9; sets background and text color.

Sidebar Styles

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

Styles the sidebar:
position: fixed; top: 0; left: 0; fixes it to the top left of the viewport.
height: 100%; width: var(--tab-width); sets its height to full viewport height and width as per the --tab-width variable.
background: #17181a; sets the background color of the sidebar.

Tabbed Navigation Styles

input {
  display: none;
}

Hides all <input> elements (used for tab selection) from display.

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

Styles the tab content area:
position: relative; positions content relative to its normal position.
overflow: hidden; hides overflowing content.
height: 140px; sets a fixed height for the content area.

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

Styles the container for tab content sections:
position: absolute; top: 0; left: 0; positions it at the top left of its container.
display: flex; align-items: center; aligns items vertically centered.
width: calc(var(--tab-width) * 3); calculates the total width to accommodate all tab content sections.
transition: 0.3s; adds a smooth transition effect for content switching.

Tab Button and Label Styles

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

Styles the tab labels:
text-align: center; centers the text.
padding: 20px 0; provides vertical padding.
font-size: 15px; sets the font size.
width: var(--button-width); sets the width based on the --button-width variable.
opacity: 0.35; sets initial opacity for inactive tabs.
cursor: pointer; changes cursor to pointer on hover.

Tab Navigation Interaction (Using CSS Specificity)

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

Uses CSS sibling and child selectors to control the appearance of tabs and content based on their states (checked or unchecked).
Adjusts the position of the .underline based on which tab is checked (translate property).
Changes the opacity of labels to highlight the active tab.
Moves the .content-inner horizontally to display the corresponding tab content.