Bottom Navigation Bar

Enhance user experience on your website with a bottom navigation bar. Learn how to create a user-friendly navigation system placed at the bottom of the screen for easy access and improved usability.

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<nav class="navbar">
  <h1>Page Title</h1>
  <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" />
    <input id="tab-4" 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"> notifications </label>
      <label class="material-symbols-outlined" for="tab-3">
        favorite
      </label>
      <label class="material-symbols-outlined" for="tab-4">
        settings
      </label>
      <div class="underline"></div>
    </div>
</nav>

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #2ebdff;
}

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

body {
  margin: 0;
  font-family: "Euclid Circular A";
  background: #f9f9f9;
  color: #f9f9f9;
}

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  background: #17181a;
  width: 100%;
}

.navbar h1 {
  display: none;
  flex: 2 1 auto;
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 0 16px;
}

@media (width >= 440px) {
  .navbar {
    top: 0;
    bottom: auto;
  }

  .tabs {
    scale: 0.8;
    width: 200px;
  }

  .navbar h1 {
    display: block;
  }
}

.tabs {
  flex: 1 1 auto;
}

.tabs > input {
  display: none;
}

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

label {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-size: 15px;
  flex: 1 1 auto;
  min-width: 58px;
  opacity: 0.35;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.buttons {
  position: relative;
  display: flex;
}

.underline {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -3px;
  width: 25%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.underline::after {
  content: "";
  display: block;
  translate: 0 -15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
}

.tabs input:nth-child(1):checked ~ .buttons .underline {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .buttons .underline {
  translate: 100% 0;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  translate: 200% 0;
}

.tabs input:nth-child(4):checked ~ .buttons .underline {
  translate: 300% 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),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4) {
  opacity: 1;
  color: black;
}

```
No need of JavaScript
```

Adding a bottom navigation bar can enhance the user experience on your website by providing easy access to key sections. This guide will walk you through the process of implementing a bottom navigation bar using HTML and CSS. You'll learn how to copy the provided code snippet, link the necessary CSS files, and customize the navigation bar to fit your specific requirements.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet. This snippet includes the foundational structure and styles needed for the bottom navigation bar. Simply select the code, click the copy button, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

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

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Step 3: Customize and Make it Yours

Personalize the bottom navigation bar to match your website's aesthetics and functionality requirements. Adjust the CSS styles to modify the navigation bar's appearance, behavior, and interactivity. Experiment with different colors, font sizes, and icons to create a seamless and engaging user experience.

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

Code Explanation

HTML Code

<nav class="navbar">: Defines a navigation bar section.

<h1>Page Title</h1>: Displays the title "Page Title" within the navigation bar. This could be the main heading or logo of the page.

Tabs Section (<div class="tabs">):

Radio Inputs (<input type="radio" ... />): These are used as tab selectors. Each input has a unique id (tab-1, tab-2, etc.) and shares the same name attribute (group). This grouping ensures that only one tab can be selected at a time.
Tab Labels (<label for="tab-x">...</label>): Each label corresponds to a radio button using the for attribute, which matches the id of the respective radio button (tab-1, tab-2, etc.). The text inside each label ("home", "notifications", "favorite", "settings") represents the tab names or labels that users click on.
<div class="buttons">: Contains all the tab labels (<label> elements) and provides a container for styling and organization.
<div class="underline"></div>: This <div> likely serves as a visual indicator (like an underline) to highlight the currently active tab. Its styling (not shown here) would typically change dynamically based on which radio button is selected.

CSS Code

Global Settings

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #2ebdff;
}

* { box-sizing: border-box; }: Applies box-sizing: border-box; to all elements, ensuring padding and border are included in the element's total width and height.
:root { --color-primary: #2ebdff; }: Defines a CSS custom property (--color-primary) with a value of #2ebdff, which is a shade of blue. This variable is likely used throughout the stylesheet for consistent theming.

Basic Styling for Layout

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

body {
  margin: 0;
  font-family: "Euclid Circular A";
  background: #f9f9f9;
  color: #f9f9f9;
}

Sets the height of html, body, and .wrapper to 100% of the viewport height (height: 100%;), ensuring the layout takes up the full screen.
Removes default margin (margin: 0;) and sets the font family (font-family: "Euclid Circular A";) for the entire document.
Sets a light gray background color (background: #f9f9f9;) and text color (color: #f9f9f9;) for the body content.

Navbar Styling

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  background: #17181a;
  width: 100%;
}

.navbar h1 {
  display: none;
  flex: 2 1 auto;
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 0 16px;
}

Styles the .navbar element as a fixed position container at the bottom (bottom: 0;) of the viewport with full width (width: 100%;).
Uses flexbox (display: flex; align-items: center; justify-content: space-between;) to align items horizontally with space between them.
Sets a background color (background: #17181a;) for the navbar and a fixed height (height: 72px;).
Hides the <h1> element within .navbar (display: none;) but displays it and adjusts its flex properties when the viewport width is at least 440px (using @media (width >= 440px)).

Tab Navigation Styling

.tabs {
  flex: 1 1 auto;
}

.tabs > input {
  display: none;
}

Defines the .tabs section to flexibly occupy available space (flex: 1 1 auto;).
Hides radio buttons (<input>) within .tabs (display: none;), which are used for tab selection.

Label and Button Styling

label {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-size: 15px;
  flex: 1 1 auto;
  min-width: 58px;
  opacity: 0.35;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.buttons {
  position: relative;
  display: flex;
}

.underline {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -3px;
  width: 25%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

Styles <label> elements used as tabs: sets padding, font size, opacity, cursor pointer, and text alignment. These labels are clickable (cursor: pointer;) and transition smoothly (transition: 0.3s;) when their styles change.
Styles .buttons container as a flex container and sets the .underline element within it. .underline positions itself absolutely at the bottom of its container and transitions smoothly (transition: 0.3s;).

Tab Selection States

.tabs input:nth-child(1):checked ~ .buttons .underline {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .buttons .underline {
  translate: 100% 0;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  translate: 200% 0;
}

.tabs input:nth-child(4):checked ~ .buttons .underline {
  translate: 300% 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),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4) {
  opacity: 1;
  color: black;
}

These CSS rules handle the visual state changes when a tab is selected:
Moves the .underline element to the appropriate position (translate: X% 0;) based on which radio button (<input>) is checked.
Changes the opacity and color of the corresponding <label> (label:nth-child(X)) to indicate the active tab.