Cara Membuat Bottom Navbar Seperti Aplikasi Mobile dengan Bootstrap
85 / 100

How to Make the Bottom Navbar Like a Mobile Application with Bootstrap

How to Make the Bottom Navbar Like a Mobile Application with Bootstrap. Based on several studies I've heard from UI/UX friends, Navbar at the bottom will make it easier for mobile users to access the menu.

Why?

Because our fingers will find it easier to reach the Navbar at the bottom compared to the one at the top.

Then..

How do we make Navbar Bottom in Bootstrap?

Let's discuss.

Creating a Navbar for Mobile

Because the navbar that we will create will only appear on mobile only, then we need to use the display class to set how this navbar is displayed.

What's the class??

  • d-md-none (hide on tablet and laptop);
  • d-lg-none (hide on PC screen);
  • d-xl-none (hide on extra large screen size)

Let's try to make.

Create a new file with a name bottom-nav.html, then fill it with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bottom Navbar Bootstrap</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <!-- Bottom Navbar -->
  <nav class="navbar navbar-dark bg-info navbar-expand d-md-none d-lg-none d-xl-none">
    <ul class="navbar-nav nav-justified w-100">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Cari</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Add</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Notif</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
      </li>
    </ul>
  </nav>


  <article class="container py-5">
    <h1 class="h1">Belajar Membuat Bottom Nav</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum exercitationem alias libero mollitia esse, illum odio ex perspiciatis omnis voluptate ducimus, corporis cupiditate nobis corrupti voluptatum fugit at dolor eaque.</p>
  </article>
  
</body>
</html>

To see the results, open this file with web browser.

After that, right click->Inspect Element and activate Responsive Design Mode.

Then the result:

navbar responsive mode

Take note..

In the code above, we give class navbar-expand on Navbar. This will make the menu in the navbar expand sideways on all device sizes.

If this class is deleted, then the menu on the Navbar will be displayed stacked like this.

menu navbar bertumpuk

Then try to pay attention to the display class that is used:

  • d-md-none (hide Navbar on tablet and laptop);
  • d-lg-none (hide Navbar on PC screen);
  • d-xl-none (hide Navbar on extra large screen size)

To test it, try changing the device used in responsive design. For example using iPad.

ipad view

Navbar not showing on iPad, because he belongs to the medium screen size (md).

Nah, now the problem.. This navbar is at the top. We want it to be at the bottom and only displayed on mobile.

How to do it?

Easy..

Please continue:

Put Navbar Below

We need class fixed-bottom so that the Navbar is displayed in a fixed position and is at the bottom.

Let's try..

Add a class fixed-bottom on Navbar (<nav>).

<!-- Bottom Navbar -->
  <nav class="navbar navbar-dark bg-info navbar-expand d-md-none d-lg-none d-xl-none fixed-bottom">
    <ul class="navbar-nav nav-justified w-100">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Cari</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Add</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Notif</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
      </li>
    </ul>
  </nav>

Result:

navbar fixed bottom

Good, now the Navbar is at the bottom.

Make Navbar more interesting, we will change the text on the menu with icons.

Add Icon

We can use icons from Fontawesome, Bootstrap, css.gg, dll. Want to wear whatever you can, or if you have your own icon design you can also use it.

My advice, use icon images in SVG format. Because the image resolution is consistent.

OK..

In this tutorial, I will use the icon from Bootstrap. Go to page icons.getbootstrap.com

. Then find the icon you want to use.

bootstrap icon

Then select the desired icon, and copy the SVG code.

kode svg

After that, paste this SVG code inside link element on Navbar.

  <!-- Bottom Navbar -->
  <nav class="navbar navbar-dark bg-info navbar-expand fixed-bottom d-md-none d-lg-none d-xl-none">
    <ul class="navbar-nav nav-justified w-100">
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
            <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Cari</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Add</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Notif</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
      </li>
    </ul>
  </nav>

Result:

home icon

If the icon size is too small, just change the size width and height nya. Usually I change it to 1.5em.

<svg width="1.5em" height="1.5em" ...

Then the result:

ukuran ikon

Already know how to add icons?

Good..

Now add also for the other menu icons.

Here is the Navbar code, after i added all the icons.

<!-- Bottom Navbar -->
  <nav class="navbar navbar-dark bg-info navbar-expand fixed-bottom d-md-none d-lg-none d-xl-none">
    <ul class="navbar-nav nav-justified w-100">
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-house" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
            <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-plus-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
            <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
          </svg>
        </a>
      </li>
    </ul>
  </nav>

source :https://www.petanikode.com/bootstrap-bottom-navbar/

 1,467 total views,  4 views today

By admin

Writer

Leave a Reply

Your email address will not be published.

Web Hosting Murah Yang Terbaik Di Indonesia