Home
Akram Khan
beautifull responsive navbar

beautifull responsive navbar

I create a attractive responsive navbar using tailwindcss and custom css.
also work on mobile devices.

This tailwind example is contributed by Akram Khan, on 06-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Akram Khan

3.5k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extreme Cyberpunk Navbar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes neon-pulse {
            0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
            50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
        }

.neon-text {
            animation: neon-pulse 1.5s infinite alternate;
        }

.bg-animated {
            background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.cyber-grid {
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: cyber-grid-move 20s linear infinite;
        }

@keyframes cyber-grid-move {
            0% { background-position: 0 0; }
            100% { background-position: 20px 20px; }
        }

.nav-link {
            position: relative;
            overflow: hidden;
        }

.nav-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #00ffff;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

.nav-link:hover::before {
            transform: translateX(0);
        }

.nav-link::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(100%);
            background: linear-gradient(to bottom, #00ffff, #0080ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: transform 0.3s ease;
        }

.nav-link:hover::after {
            transform: translateY(0);
        }

.glitch-effect {
            position: relative;
        }

.glitch-effect::before,
        .glitch-effect::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

.glitch-effect::before {
            left: 2px;
            text-shadow: -2px 0 #ff00de;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }

.glitch-effect::after {
            left: -2px;
            text-shadow: -2px 0 #00ffff;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }

@keyframes glitch-anim {
            0% { clip: rect(39px, 9999px, 71px, 0); }
            20% { clip: rect(3px, 9999px, 5px, 0); }
            40% { clip: rect(6px, 9999px, 38px, 0); }
            60% { clip: rect(13px, 9999px, 43px, 0); }
            80% { clip: rect(44px, 9999px, 93px, 0); }
            100% { clip: rect(54px, 9999px, 47px, 0); }
        }

#menu-toggle:checked ~ .menu-icon .hamburger {
            transform: rotate(45deg);
        }

#menu-toggle:checked ~ .menu-icon .hamburger::before {
            transform: translateY(8px) rotate(90deg);
        }

#menu-toggle:checked ~ .menu-icon .hamburger::after {
            transform: translateY(-8px) rotate(90deg);
        }

.hamburger,
        .hamburger::before,
        .hamburger::after {
            content: '';
            display: block;
            background: #00ffff;
            height: 3px;
            width: 30px;
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

.hamburger::before { transform: translateY(-8px); }
        .hamburger::after { transform: translateY(8px); }

@media (max-width: 768px) {
            .menu {
                position: fixed;
                top: 60px;
                left: 0;
                width: 100%;
                height: 0;
                background: rgba(0, 0, 0, 0.9);
                overflow: hidden;
                transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            }

#menu-toggle:checked ~ .menu {
                height: calc(100vh - 60px);
            }
        }
    </style>
</head>
<body class="bg-black text-white min-h-screen">
    <nav class="bg-animated cyber-grid fixed w-full z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <a href="#" class="text-2xl font-bold neon-text glitch-effect" data-text="CYBERLINK">CYBERLINK</a>
                <input type="checkbox" id="menu-toggle" class="hidden">
                <label for="menu-toggle" class="menu-icon cursor-pointer md:hidden">
                    <span class="hamburger"></span>
                </label>
                <ul class="menu hidden md:flex md:items-center space-x-6">
                    <li><a href="#" class="nav-link" data-text="Home">Home</a></li>
                    <li><a href="#" class="nav-link" data-text="Features">Features</a></li>
                    <li><a href="#" class="nav-link" data-text="About">About</a></li>
                    <li><a href="#" class="nav-link" data-text="Contact">Contact</a></li>
                    <li><a href="#" class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold py-2 px-4 rounded hover:from-cyan-600 hover:to-blue-600 transition-all duration-300">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </nav>

<main class="pt-20">
        
        <div class="container mx-auto px-4 py-20">
            <h1 class="text-4xl font-bold mb-4">Welcome to Cyberlink</h1>
            <p>This is a placeholder for your main content. The navbar above demonstrates the extreme cyberpunk design.</p>
        </div>
    </main>

menuToggle.addEventListener('change', function() {
            if (this.checked) {
                menu.classList.remove('hidden');
                menu.classList.add('flex', 'flex-col', 'items-center', 'justify-center', 'space-y-4');
            } else {
                menu.classList.add('hidden');
                menu.classList.remove('flex', 'flex-col', 'items-center', 'justify-center', 'space-y-4');
            }
        });

Related Examples

Admin panel with collapsible menus

Author:
Rajesh Maheshwari

10 months ago

5.2k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

10.1k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

8 months ago

1.3k
Tesla Navbar
a tesla navbar

Author:
Cristian

1 year ago

2.8k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1k
joker
joker cyber punk

Author:
Baraka Salvator

7 months ago

1.2k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

10 months ago

1.9k
Basic Auto-Hiding Navbar

Author:
Anonymous

1 year ago

2.3k
websitee

Author:
Anonymous

7 months ago

536
Simple navbar
semi transparent

Author:
Laurits

3 years ago

14.1k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

1.7k
Fixed navbar

Author:
Oliver Hansen

2 years ago

27.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components