Mobile App Bottom Bar

By Rafi

menu nav navigation mobile flexbox icons button

How do I use This?

A mobile app bottom navigation bar.

HTML

<div class="mobile-app-icon-bar">
  <button><i class="fa fa-picture-o" aria-hidden="true"></i></button>
  <button><i class="fa fa-map-marker" aria-hidden="true"></i></button>
  <button><i class="fa fa-upload" aria-hidden="true"></i></button>
  <button><i class="fa fa-list-ul" aria-hidden="true"></i></button>
  <button><i class="fa fa-cog" aria-hidden="true"></i></button>
</div>

$mobile-app-icon-bar-bg: $white;
$mobile-app-icon-bar-icon-size: 2rem;

.mobile-app-icon-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: $mobile-app-icon-bar-bg;

  button {
    padding: 1.25rem;
    cursor: pointer;

    svg,
    i,
    img {
      font-size: $mobile-app-icon-bar-icon-size;
      max-height: $mobile-app-icon-bar-icon-size;
      max-width: $mobile-app-icon-bar-icon-size;
    }
  }
}

.mobile-app-icon-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
}

.mobile-app-icon-bar button {
  padding: 1.25rem;
  cursor: pointer;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {
  font-size: 2rem;
  max-height: 2rem;
  max-width: 2rem;
}

Mobile App Bottom Bar

By Rafi

Responsive Breadcrumb with Page Number

Multi-level Offcanvas Menu

Hero Subnav

Mobile App Bottom Bar

By Rafi

Similar Building Blocks

Responsive Breadcrumb with Page Number

Multi-level Offcanvas Menu

Hero Subnav