Create Bottom Navigation with HTML/CSS
Published: 2023-01-14 06:00:47

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](https://iconify.design/)

## 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](https://iconify.design/) 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.

```html
<!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.

![Base Html for Bottom Nav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d2y4kdyvbehshtk21i3.png)

## Add our CSS.

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

```css
/* 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.

![Preview for classic Bottom Nav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ht4h3wncse9czi08od2.gif)

## 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.

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

```css
/* 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.

![Bottom Nav with CTA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1nuujzyb7kbaefonc80.gif)

## 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.

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

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

![levitating bottom nav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4wv35fa6ezskl3ld3to.gif)

And there you have it, our bottom navigation with only HTML/CSS. For more variation, you can checkout my repo [here](https://github.com/NabillaTrisnani/bottomnav), and let me know if it helps or if I’m missing something in the comments below.

Thanks for coming by and Peace ✌

---

## Author
- Github: [@NabillaTrisnani](https://github.com/NabillaTrisnani)
- LinkendIn: [Nabilla Trisnani](https://www.linkedin.com/in/nabilla-trisnani/)
- Twitter: [@NabillaTrisnani](https://twitter.com/NabillaTrisnani)