Components Sidebar Navigation Sidebar Navigation Component

Sidebar Navigation Component

A sidebar navigation component tailored for blogs, designed with 3D elements and vibrant colors. Supports dark mode and is responsive, featuring a simple layout suitable for content consumption.

Preview

HTML Code

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

Related Components

Sidebar Navigation Component

A complex, responsive sidebar navigation component for a marketplace UI, featuring vibrant colors and dark mode support. Includes multiple sections, interactive elements, and user profile.

Open

Sidebar Navigation Component

A responsive sidebar navigation component designed in the Brutalism style, perfect for e-commerce applications. It features vibrant colors, high contrast, and multiple interactive elements, including links to different shopping categories, user account options, and a vibrant call-to-action button for shopping cart access. The design adapts to dark mode as well.

Open

RetroSidebarNavigation

A retro/vintage styled sidebar navigation component with responsive effects and dark theme support using Tailwind CSS.

Open