Back to Snippets

Mobile App Bottom Navigation CSS

Deliver a native app experience on the web with this sticky bottom navigation bar. It features clean SVG icons, a subtle glassmorphism effect, and a clear active state that highlights the current page.

382

#css

#navigation

#bottom nav

#mobile

#app interface

#svg

#glassmorphism

/HTML *CSS ()JS Output Live Updates

.bottom-nav {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
  padding: 12px 0 20px 0; /* Extra padding for safe area on mobile */
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 4px;
  transition: color 0.3s ease;
  position: relative;
}
.nav-link svg {
  transition: transform 0.3s ease, stroke 0.3s ease;
}
/* Active State */
.nav-link.active {
  color: #2563eb;
}
.nav-link.active svg {
  stroke: #2563eb;
  transform: translateY(-2px);
}
.nav-link:hover {
  color: #1f2937;
}
.nav-link:hover svg {
  stroke: #1f2937;
}

<div class="bottom-nav">
  <a href="#" class="nav-link active">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
    <span>Home</span>
  </a>
  <a href="#" class="nav-link">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    <span>Search</span>
  </a>
  <a href="#" class="nav-link">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
    <span>Saved</span>
  </a>
  <a href="#" class="nav-link">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
    <span>Profile</span>
  </a>
</div>

Mobile App Bottom Navigation CSS

Share Code Snippet