Navigation Tabs with Icons

Elevate your website's navigation with dynamic tabs featuring icons. Learn how to implement stylish tabs with icons using HTML and CSS to enhance user experience and engagement.

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@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<div class="widget">
  <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"> home </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>
</div>

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #8f44fd;
  --tab-width: 300px;
  --button-width: 64px;
}

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

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

.widget {
  background: #17181a;
  width: var(--tab-width);
  border-radius: 8px;
}

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 {
  padding: 20px;
  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: 64px;
  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
```

Improve your website's navigation with attractive and functional navigation tabs with icons. This guide will walk you through creating customizable navigation tabs using HTML and CSS. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the tabs to match your website's design.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the navigation tabs with icons. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file and Google Material Symbols font are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
```

Step 3: Customize and Make it Yours

Personalize the navigation tabs with icons to match your website's branding and functionality. Adjust the CSS styles to modify the tabs' appearance, colors, and interactions. Experiment with different icons, colors, and layouts to create a unique and engaging user experience.

By following these steps, you can implement and customize navigation tabs with icons on your website using HTML and CSS. Tailor the tabs to your specific needs and enhance your site's navigation with this modern and stylish component.

Code Explanation

HTML Code

html

<div class="widget">

<div class="widget">: The main container for the entire widget.

Tabs Container

<div class="tabs">

<div class="tabs">: Container for the tabs and their related content.

Hidden 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" />

<input id="tab-1" type="radio" name="group" />: Radio input for the first tab.
<input id="tab-2" type="radio" name="group" />: Radio input for the second tab.
<input id="tab-3" type="radio" name="group" />: Radio input for the third tab.
name="group": Ensures only one radio input can be selected at a time, as they belong to the same group.

Tab Buttons

<div class="buttons">
  <label class="material-symbols-outlined" for="tab-1"> home </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="buttons">: Container for the tab buttons.
<label class="material-symbols-outlined" for="tab-1"> home </label>: Label for the first tab button. Clicking this label selects the radio input with ID tab-1.
<label class="material-symbols-outlined" for="tab-2"> lock </label>: Label for the second tab button.
<label class="material-symbols-outlined" for="tab-3"> settings </label>: Label for the third tab button.
<div class="underline"></div>: An element that can be used to highlight the selected tab.

Tab Content

<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 class="content">: Container for the tab content.
<div class="content-inner">: Inner container for organizing the tab content.
<div>: Each div inside content-inner represents the content of a tab.
<h2>Home</h2>: Heading for the first tab content.
<p>This is the tab content, you can put anything you like in here.</p>: Paragraph for the first tab content.
The structure repeats for the other tabs (Account and Settings).

CSS Code

Universal Selector

* {
  box-sizing: border-box;
}

*: Applies the box-sizing: border-box; rule to all elements, ensuring that padding and border are included in the element's total width and height.
Root Variables

:root {
  --color-primary: #8f44fd;
  --tab-width: 300px;
  --button-width: 64px;
}

:root: Defines CSS custom properties (variables) for primary color, tab width, and button width.

Basic Setup

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

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

html, body, .wrapper: Sets the height of these elements to 100% to ensure full viewport coverage.
body: Centers content using grid, removes margin, sets font and line-height, and defines background and text color.

Widget Container

.widget {
  background: #17181a;
  width: var(--tab-width);
  border-radius: 8px;
}

.widget: Sets background color, width, and border radius for the main widget container.

Hidden Inputs

input {
  display: none;
}

input: Hides the radio input elements.

Headings

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

h2: Sets margin, font size, and font weight for heading elements.

Content Container

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

.content: Positions the container relative to its parent, hides overflow, and sets a fixed height.
.content-inner: Positions absolutely within .content, displays as a flex container, and transitions smoothly. Its width is three times the tab width (for three tabs).
.content-inner > div: Each tab's content container, inheriting the width of .content-inner and adding padding.

Labels

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

label: Sets padding, font size, width, and cursor for tab buttons, and sets initial opacity for unselected tabs.

Paragraphs

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

p: Sets margin, font size, and text color for paragraphs.

Button Container

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

.buttons: Positions relatively, displays as flex, and adds a bottom border for the tab button container.

Underline Indicator

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

.underline: Positions absolutely within .buttons, with specified width, height, background color, and transition.

Tab Selection

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

nth-child(n):checked: Applies styles when a specific radio input is checked. Moves .underline to the position of the checked tab.

Tab Button Opacity

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

nth-child(n):checked: Sets the opacity of the corresponding label to 1 when its radio input is checked.

Content Translation

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

nth-child(n):checked: Translates .content-inner to show the content of the checked tab by moving it horizontally based on the tab width.