Create Bottom Navigation with HTML/CSS

Hello Devs, for this tutorial we’re going to make bottom navigation with just HTML/CSS. As for the icon, we’re going to use some of the icons from iconify

Create our HTML

To start our project we need to create a file called index.html. Inside our index.html there’s an import link to iconify for our icons, two files CSS called base.css and bottomnav.css, and of course our .bottomnav.
Inside the .bottomnav, there are four a href tags with a class .active for if the link is active. Inside each of the a href tag, there’s an icon and the name of the a href inside the span tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Classic Bottom Navigation</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Home</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Favorite</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Search</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>User</span>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

Now our index.html should look like this.

Add our CSS.

/* base.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
h3,
p {
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  background-color: #f1f6ff;
}

.container {
  padding: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
h1 {
  text-align: center;
  margin-bottom: 0;
}

/* bottomnav.css */
.bottomnav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

After we add our CSS it should look like this.

Create Bottom Navigation with CTA

For this .bottomnav, there are four a href tag with a class .active for if the link is active and one a href tag with a class attribute called .bottomnav-cta. Inside each of the a href tag other then the .bottomnav-cta, there’s an icon and the name of the a href inside the span tag. For the .bottomnav-cta, there’s no text and just an icon. Here’s the code to create our bottom navigation.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Bottom Navigation with CTA</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Home</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Favorite</span>
            </a>
            <a href="" class="bottomnav-cta">
              <iconify-icon
                icon="tabler:square-rounded-plus"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Search</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>User</span>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

/* bottomnav.css */
.bottomnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav .bottomnav-cta {
  color: #dfeffd;
  background-color: #0085ff;
  padding: 12px;
  border-radius: 50%;
}
.bottomnav .bottomnav-cta .bottomnav-icon {
  font-size: 22px;
}
.bottomnav .bottomnav-cta .bottomnav-icon {
  color: #dfeffd;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

Here’s the preview for our bottom nav with CTA.

Create Levitating Bottom Navigation

For our levitating bottom navigation, it’s basically the same as our classic bottom navigation except without link text and has a rounded border similar to the pills component. Here’s the code to create one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Levitating Bottom Navigation</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

.bottomnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
  border-radius: 25px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

And here’s the preview for our levitating bottom nav.

And there you have it, our bottom navigation with only HTML/CSS. For more variation, you can checkout my repo here, and let me know if it helps or if I’m missing something in the comments below.

Thanks for coming by and Peace ✌