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

2.4k

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

Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

20k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

11 months ago

6k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

7 months ago

1.3k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

2 months ago

1.5k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

1 month ago

515
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

1 year ago

6.2k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

23.2k
Sidebar with only icons

Author:
Rajesh Maheshwari

1 week ago

112
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

14.5k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

4 months ago

1.4k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

16.5k
Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

Author:
AKASH GANDHAR

7 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components