→ Melissa Chen
→ Responsive Bottom Navigation Bar with Li...

Responsive Bottom Navigation Bar with Light & Dark Modes

This Example is contributed by Melissa Chen, on 11-May-2025. It is responsive.

Navigation Sticky Mobile

<div class="nav-container">
  <div class="theme-toggle">
    <input type="checkbox" id="theme-switch">
    <label for="theme-switch" class="toggle-label">
      <i class="icon-sun">☀️</i>
      <i class="icon-moon">🌙</i>
    </label>
  </div>
  <nav class="bottom-nav">
    <a href="#" class="nav-item active">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 0 0 .707-1.707l-9-9a.999.999 0 0 0-1.414 0l-9 9A1 1 0 0 0 3 13zm9-8.586 6 6V15l.001 5H6v-9.586l6-6z"></path>
      </svg>
      <span>Home</span>
    </a>
    <a href="#" class="nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
      </svg>
      <span>Search</span>
    </a>
    <a href="#" class="nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 22c4.879 0 9-4.121 9-9s-4.121-9-9-9-9 4.121-9 9 4.121 9 9 9zm0-16c3.794 0 7 3.206 7 7s-3.206 7-7 7-7-3.206-7-7 3.206-7 7-7zm5.284-2.293 1.412-1.416 3.01 3-1.413 1.417zM5.282 3.293 3.87 1.877l-2.98 3 1.414 1.413z"></path>
      </svg>
      <span>Activity</span>
    </a>
    <a href="#" class="nav-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"></path>
      </svg>
      <span>Profile</span>
    </a>
  </nav>
</div>

Related Examples

Responsive Collapsible Sidebar Navigation
A clean, responsive sidebar navigation component with toggle functionality for modern web applications and dashboards.

Author:
Julian Parker

2 months ago
Responsive Navigation Bar with Dropdown Menu
A responsive navigation bar featuring dropdown menus, search functionality, and mobile-friendly toggle for seamless website navigation across all devices.

Author:
Aiden Mercer

2 months ago
Responsive Navbar with Collapsible Sidebar and Dark Mode Toggle
A fully responsive navigation system featuring a sleek navbar that transforms into a sidebar on mobile devices, complete with smooth dark mode toggle functionality for enhanced user experience.

Author:
Sammy Rodriguez

2 months ago
Mobile-Friendly Navbar with Collapsible Menu
A responsive navigation bar that transforms into a dropdown menu on mobile devices, optimizing screen space while maintaining full site navigation.

Author:
Anonymous

2 months ago
Mobile-Friendly Navigation Bar with Toggle
A fully responsive navigation bar that transforms into a hamburger menu on mobile devices, providing seamless navigation across all screen sizes.

Author:
Sushil shahu

2 months ago
Responsive Navigation Bar with Dropdown
A responsive navigation bar with a dropdown menu for easy site navigation on any device. Includes smooth animations and accessibility features.

Author:
MD. Tayyub

3 months ago
Responsive Navigation Breadcrumb with Hover Effects
A responsive breadcrumb navigation component that provides users with an intuitive way to understand their location within a website's hierarchy and easily navigate back to previous pages.

Author:
Julian Parker

2 months ago
Right sidebar with CSS
A sleek animated navigation bar with a sliding indicator that follows the active menu item, creating a smooth and engaging user experience for your website.

Author:
Julian Parker

2 months ago
Features list with icons

Author:
Jordan McKenzie

3 months ago
Navigation Bar with Responsive Hamburger Menu
A modern, responsive navigation bar featuring smooth transitions, mobile-friendly hamburger menu, and subtle hover effects for enhanced user experience.

Author:
Emma Thompson

3 months ago
Responsive Navigation Bar with Dropdown
A responsive navigation bar with a dropdown menu for easy navigation on all devices. Includes smooth animations and accessibility features.

Author:
Amelia Chen

3 months ago
Modern Stacked List Component
A responsive stacked list component with elegant hover animations, perfect for displaying content in a clean, organized format.

Author:
Jorrit

3 months ago

Didn't find component you were looking for?

Search from 500+ components