Material Design Bottom Navigation

index.html

<header class="mdc-top-app-bar mdc-top-app-bar--fixed" data-mdc-auto-init="MDCTopAppBar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <span class="mdc-top-app-bar__title logo">Material Bottom Navigation</span>
    </section>
  </div>
</header>
<div class="mdc-top-app-bar-fixed-adjust demo-container demo-container-1">
  <div class="demo-card demo-card-1">
    <div class="mdc-bottom-navigation">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">history</span>
          <span class="mdc-bottom-navigation__list-item__text">Recents</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">favorite</span>
          <span class="mdc-bottom-navigation__list-item__text">Favourites</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z"></path>
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Nearby</span>
        </span>
      </nav>
    </div>
  </div>
  <div class="demo-card demo-card--landscape demo-card-2">
    <div class="status-bar">
      <i class="material-icons">network_wifi</i>
      <i class="material-icons">network_cell</i>
      <i class="material-icons">battery_full</i>
      12:30
    </div>
    <div class="mdc-bottom-navigation">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">history</span>
          <span class="mdc-bottom-navigation__list-item__text">Recents</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">favorite</span>
          <span class="mdc-bottom-navigation__list-item__text">Favourites</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z"></path>
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Nearby</span>
        </span>
      </nav>
    </div>
  </div>
  <div class="demo-card demo-card--tablet demo-card-3">
    <div class="mdc-bottom-navigation">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">history</span>
          <span class="mdc-bottom-navigation__list-item__text">Recents</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">favorite</span>
          <span class="mdc-bottom-navigation__list-item__text">Favourites</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-ripple-surface mdc-ripple-surface--primary" data-mdc-auto-init="MDCRipple" data-mdc-ripple-is-unbounded>
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z"></path>
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Nearby</span>
        </span>
      </nav>
    </div>
  </div>
</div>
<div class="demo-container demo-container-2">
  <div class="demo-card demo-card-4 demo-nav-theme">
    <div class="mdc-bottom-navigation mdc-bottom-navigation--shifting">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">tv</span>
          <span class="mdc-bottom-navigation__list-item__text">Movies and TV</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">music_note</span>
          <span class="mdc-bottom-navigation__list-item__text">Music</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">book</span>
          <span class="mdc-bottom-navigation__list-item__text">Books</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" />
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Newstand</span>
        </span>
      </nav>
    </div>
  </div>
  <div class="demo-card demo-card--landscape demo-card-5 demo-nav-theme">
    <div class="status-bar">
      <i class="material-icons">network_wifi</i>
      <i class="material-icons">network_cell</i>
      <i class="material-icons">battery_full</i>
      12:30
    </div>
    <div class="mdc-bottom-navigation mdc-bottom-navigation--shifting">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">tv</span>
          <span class="mdc-bottom-navigation__list-item__text">Movies and TV</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">music_note</span>
          <span class="mdc-bottom-navigation__list-item__text">Music</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">book</span>
          <span class="mdc-bottom-navigation__list-item__text">Books</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" />
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Newstand</span>
        </span>
      </nav>
    </div>
  </div>
  <div class="demo-card demo-card--tablet demo-card-6 demo-nav-theme">
    <div class="mdc-bottom-navigation mdc-bottom-navigation--shifting">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">tv</span>
          <span class="mdc-bottom-navigation__list-item__text">Movies and TV</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">music_note</span>
          <span class="mdc-bottom-navigation__list-item__text">Music</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">book</span>
          <span class="mdc-bottom-navigation__list-item__text">Books</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" />
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Newstand</span>
        </span>
      </nav>
    </div>
  </div>
</div>
<div class="demo-nav demo-card-7 demo-nav-theme">
  <div class="mdc-bottom-navigation mdc-bottom-navigation--shifting">
      <nav class="mdc-bottom-navigation__list">
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">tv</span>
          <span class="mdc-bottom-navigation__list-item__text">Movies and TV</span>
        </span>
        <span class="mdc-bottom-navigation__list-item mdc-bottom-navigation__list-item--activated">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">music_note</span>
          <span class="mdc-bottom-navigation__list-item__text">Music</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">book</span>
          <span class="mdc-bottom-navigation__list-item__text">Books</span>
        </span>
        <span class="mdc-bottom-navigation__list-item">
          <span class="material-icons mdc-bottom-navigation__list-item__icon">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" />
            </svg>
          </span>
          <span class="mdc-bottom-navigation__list-item__text">Newstand</span>
        </span>
      </nav>
    </div>
</div>

material-design-bottom-navigation.markdown

Material Design Bottom Navigation

A recreation of the Bottom navigation bar from Material Design

A Pen by EskiMojo14 on CodePen.

License.

script.js

mdc.autoInit()

var lists = document.querySelectorAll('.mdc-bottom-navigation__list');
var activatedClass = 'mdc-bottom-navigation__list-item--activated';
for (var i = 0, list; list = lists[i]; i++) {
  list.addEventListener('click', function(event) {
    var el = event.target;
    while (!el.classList.contains('mdc-bottom-navigation__list-item') && el) {
      el = el.parentNode;
    }
    if (el) {
      var selectRegex = /.*(demo-card-\d).*/;
      var activatedItem = document.querySelector('.' + event.target.parentElement.parentElement.parentElement.className.replace(selectRegex, '$1') + ' .' + activatedClass);
      if (activatedItem) {
        activatedItem.classList.remove(activatedClass);
      }
      event.target.classList.add(activatedClass);
    }
  });
}

var MDCSnackbar = mdc.snackbar.MDCSnackbar;
var snackbar = new MDCSnackbar(document.querySelector('#snackbar'));
var data =  {
  message: 'Archived',
  actionText: 'Undo',
  actionHandler: function() {
    console.log('Hi!');
  }
};
var show = function(sb) {
  snackbar.dismissesOnAction = true;
  sb.show(data);
};
  
var snackbarBtn = document.getElementById('show-snackbar');
snackbarBtn.addEventListener('click', function() {
  show(snackbar);
});

scripts

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>

style.scss

/* Important stuff */
.mdc-bottom-navigation {
  height: 56px;
  background-color: var(--mdc-theme-background, #fff);
  width: 100%;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 8;
  &__list {
    display: flex;
    justify-content: center;
    height: 100%;
  }
  
  &__list-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    min-width: 60px;
    max-width: 168px;
    box-sizing: border-box;
    color: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54));
    user-select: none;
    &__icon {
      padding-top: 8px;
      pointer-events: none;
      transition-property: padding-top, color;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: 100ms;
      path {
        fill: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54));
      }
    }
    
    &__text {
      margin-top: auto;
      padding-bottom: 10px;
      font-size: 0.75rem;
      pointer-events: none;
      transition-property: font-size, color;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: 100ms;
    }
    
    &--activated {
      .mdc-bottom-navigation__list-item__icon {
        padding-top: 6px;
      }
      .mdc-bottom-navigation__list-item__text {
        font-size: 0.875rem;
      }
      .mdc-bottom-navigation__list-item__icon, .mdc-bottom-navigation__list-item__text {
        color: var(--mdc-theme-primary, #6200ee);
        
        path {
          fill: var(--mdc-theme-primary, #6200ee);
        }
      }
    }
  }
  &--shifting {
    .mdc-bottom-navigation__list-item {
      min-width: 56px;
      max-width: 96px;
      transition-property: min-width, max-width;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: 100ms;
      .mdc-bottom-navigation__list-item__icon {
        padding-top: 16px;
        transition-property: padding-top;
      }
      .mdc-bottom-navigation__list-item__text {
        position: absolute;
        line-height: 10px;
        bottom: 0;
        opacity: 0;
        transition-property: opacity, font-size;
      }
      &--activated {
        min-width: 96px;
        max-width: 168px;
        .mdc-bottom-navigation__list-item__icon {
          padding-top: 8px;
          transition-property: padding-top;
        }
        .mdc-bottom-navigation__list-item__text {
          white-space: nowrap;
          opacity: 1;
        }
      }
    }
  }
}

/* Demo Stuff */
body {
  background-color: #fafafa;
  --mdc-theme-background: white;
  padding-bottom: 56px;
}
.demo-container {
  display: flex; 
  justify-content: center;
  align-items: center;
  width: 100%; 
  flex-wrap: wrap;
}
.demo-card {
  position: relative;
  align-items: flex-end;
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  margin: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  border-radius: 2px;
  padding-bottom: 48px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
  &::after {
    content:"";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 48px;
    background-color: black;
    background-image: url('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7RWpaeTZqTmlYOHc/layout-structure-system-android1.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    z-index: 3;
  }
  &--landscape {
    width: 616px;
    height: 350px;
    padding-bottom: 0;
    padding-right: 48px;
    &::after {
     height: 48px;
     width: 350px;
     transform: rotate(270deg);
     right: -350px;
     transform-origin: left bottom;
    }
    
    .mdc-bottom-navigation {
      left: 0;
      bottom: 0 !important;
      width: calc(100% - 48px);
    }
  }
  &--tablet {
    width: 840px;
  }
  .mdc-bottom-navigation {
    position: absolute;
    bottom: 48px;
  }
  .mdc-snackbar {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-radius: 0px;
    transition-property: bottom;
    &--active{
      bottom: 104px;
    }
  }
  .mdc-button {
    top: 0;
    margin: 6px 0px;
    align-self: center;
  }
}
.demo-container-1 {
  --mdc-theme-primary: #009688;
  --mdc-theme-primary-light: #00ddc9;
  --mdc-theme-primary-dark: #004f47;
}
.demo-nav-theme {
  .mdc-bottom-navigation {
    background-color: #00796B;
    &__list-item {
      color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7));
      path {
        fill: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7));
      }
      &--activated .mdc-bottom-navigation__list-item__icon, &--activated .mdc-bottom-navigation__list-item__text {
        color: var(--mdc-theme-text-primary-on-dark, white);
        path {
          fill: var(--mdc-theme-text-primary-on-dark, white);
        }
      }
    }
  }
}
.demo-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 8;
}
.status-bar {
  height: 24px;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 8px;
  z-index: 3;
  position: absolute;
  top: 0;
  width: calc(100% - 48px);
  box-sizing: border-box;
  color: var(--mdc-theme-text-primary-on-dark, white);
}
.status-bar .material-icons {
  font-size: 18px;
}
.header-switch {
  margin-left: 0;
  margin-right: 24px;
  padding: 16px 0;
  align-self: center;
}
[dir="rtl"] .header-switch, .header-switch[dir="rtl"] {
  margin-left: 24px;
  margin-right: 0;
}
.logo {
  font-family: Roboto Mono, monospace;
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />