About this snippet

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.

Size
2.4 KB
Uses
HTML, CSS
Loads
Nothing external
Views
492

Collections

Related snippets

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

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save