DEV Community

Cover image for Create Bottom Navigation with HTML/CSS
Nabilla Trisnani
Nabilla Trisnani

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Now our index.html should look like this.

Base Html for Bottom Nav

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;
}
Enter fullscreen mode Exit fullscreen mode 
/* 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;
}
Enter fullscreen mode Exit fullscreen mode

After we add our CSS it should look like this.

Preview for classic Bottom Nav

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>
Enter fullscreen mode Exit fullscreen mode 
/* 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;
}
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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

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 ✌

Author

Top comments (0)

Read next

awaiszafar14 profile image

TURBO Rails

Awais Zafar -

wewake-dev profile image

Practical Experiments for Optimizing Django query with the power of SQL joins

Wewake -

ahanash46390872 profile image

Upskilling for the Future: Benefits of Enrolling in a Software Testing Course in 2024

Ahana Sharma -

bilalboultif profile image

LeT's CoNtRoL YoU tO HeLp Me

bilalboultif -