Components Navigation Components Neumorphism Navigation

Neumorphism Navigation

A simple responsive navigation component with Neumorphism style for e-commerce.

Preview

HTML Code

<nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

Related Components

Dark Mode Portfolio Navigation

A complex, responsive navigation component for a portfolio website, featuring a dark mode UI with analogous colors, designed to showcase work or products. Includes desktop, tablet, and mobile layouts with dropdowns and user avatar.

Open

Skeuomorphic Navigation

A simple, responsive navigation component with Skeuomorphic design, analogous color scheme suitable for social media applications, with dark theme support.

Open

Navigation Components Component

A navigation component with a dark theme, responsive design, and no JavaScript.

Open