Playful Candy Navbar - Free UI Component

Background Color #ffffff

Text Color #2d3748

Vertical Padding (rem) 1.2

Rounding (px) 100

Fixed Position

Full Width

Container Width 1100px

Page Background #fdfcf0

Playful Candy Navbar

A cheerful, multi-colored navigation bar featuring 'candy-coated' links. Each navigation item transforms into a vibrant playful color on hover with a satisfying jelly-like bounce animation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playful Candy Navbar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --bg: {{bgColor}};                     /* Primary Background */
            --text: {{textColor}};                 /* Friendly Text Color */
            --v-pad: {{vPadding}}rem;              /* Vertical Spacing */
            --radius: {{borderRadius}}px;          /* Pill Rounding */
            --nav-w: {{navWidth}};                 /* Max Width */
            --page-bg: {{pageBg}};                 /* Soft Page Background */
            
            /* Candy Palette */
            --candy-1: #ff6b6b; /* Red */
            --candy-2: #4ecdc4; /* Cyan */
            --candy-3: #feca57; /* Yellow */
            --candy-4: #ff9ff3; /* Pink */
            --candy-5: #5f27cd; /* Purple */
            --candy-6: #1dd1a1; /* Green */
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Fredoka', sans-serif;
            background-color: var(--page-bg);
            color: var(--text);
            min-height: 200vh;
            overflow-x: hidden;
            /* Playful pattern */
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(255, 107, 107, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.05) 0%, transparent 20%);
        }

/* -- Jelly Animation -------------------------------------------- */
        @keyframes jelly {
            0% { transform: scale(1, 1); }
            30% { transform: scale(1.25, 0.75); }
            40% { transform: scale(0.75, 1.25); }
            50% { transform: scale(1.15, 0.85); }
            65% { transform: scale(0.95, 1.05); }
            75% { transform: scale(1.05, 0.95); }
            100% { transform: scale(1, 1); }
        }

/* -- Navbar Implementation --------------------------------------- */
        .nav-wrapper {
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
            padding: 1.5rem;
        }

body[data-fixed="Yes"] .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
        }

nav.candy-nav {
            width: 100%;
            max-width: var(--nav-w);
            background: var(--bg);
            border-radius: var(--radius);
            padding: var(--v-pad) 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
            transition: 0.3s;
        }

/* Brand */
        .brand {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .brand-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--candy-1), var(--candy-3));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            animation: bounce 3s infinite;
        }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Nav Group */
        .links {
            display: flex;
            list-style: none;
            gap: 0.5rem;
        }
        .links li a {
            color: var(--text);
            text-decoration: none;
            font-size: 1rem;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 100px;
            transition: all 0.3s;
            display: inline-block;
        }

/* Individual Candy Colors */
        .links li:nth-child(1) a:hover { background: rgba(255, 107, 107, 0.1); color: var(--candy-1); }
        .links li:nth-child(2) a:hover { background: rgba(78, 205, 196, 0.1); color: var(--candy-2); }
        .links li:nth-child(3) a:hover { background: rgba(254, 202, 87, 0.1); color: var(--candy-3); }
        .links li:nth-child(4) a:hover { background: rgba(255, 159, 243, 0.1); color: var(--candy-4); }

.links li a:hover {
            animation: jelly 0.6s;
            transform: scale(1.1);
        }

/* CTA Button */
        .btn-candy {
            background: var(--candy-5);
            color: white;
            padding: 12px 30px;
            border-radius: 100px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(95, 39, 205, 0.3);
            transition: 0.3s;
            border: none;
            cursor: pointer;
        }
        .btn-candy:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 8px 25px rgba(95, 39, 205, 0.4);
            background: var(--candy-5);
        }

/* Hamburger */
        .burger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            padding: 10px;
        }
        .burger div {
            width: 25px;
            height: 3px;
            background: var(--text);
            border-radius: 10px;
            transition: 0.3s;
        }

/* -- Mobile Menu ------------------------------------------------ */
        .mobile-menu {
            position: fixed;
            top: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            width: calc(100% - 40px);
            max-width: 400px;
            background: var(--bg);
            border-radius: 30px;
            padding: 2rem;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            opacity: 0;
            visibility: hidden;
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 1100;
        }
        .mobile-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .mobile-menu a {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text);
            text-decoration: none;
            padding: 15px 25px;
            border-radius: 20px;
            transition: 0.2s;
        }
        .mobile-menu a:hover { background: rgba(0,0,0,0.03); transform: translateX(10px); }

/* -- Content ----------------------------------------------------- */
        .content {
            padding: 12rem 2rem 5rem;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .bubble {
            background: white;
            border-radius: 40px;
            padding: 4rem;
            box-shadow: 0 20px 50px rgba(0,0,0,0.03);
            margin-bottom: 3rem;
        }
        h1 { font-size: 4rem; font-weight: 700; margin-bottom: 2rem; color: var(--candy-1); }
        p { font-size: 1.2rem; line-height: 1.8; opacity: 0.8; }

/* -- Responsive -------------------------------------------------- */
        @media (max-width: 1024px) {
            .links, .btn-candy { display: none; }
            .burger { display: flex; }
        }

@media (max-width: 600px) {
            h1 { font-size: 2.5rem; }
            nav.candy-nav { padding: 1rem; }
            .brand span { display: none; }
        }

/* Layout Switch Logic */
        body[data-full="No"] .nav-wrapper {
            padding: 1.5rem;
        }
        body[data-full="Yes"] .nav-wrapper {
            padding: 0;
        }
        body[data-full="No"] nav.candy-nav {
            max-width: var(--nav-w);
        }
        body[data-full="Yes"] nav.candy-nav {
            max-width: 100%;
            border-radius: 0;
        }

</style>
</head>
<body data-fixed="{{isFixed}}" data-full="{{isFullWidth}}">

<div class="mobile-menu" id="mobileMenu">
        <a href="#" style="color: var(--candy-1);">SWEET HOME</a>
        <a href="#" style="color: var(--candy-2);">CANDY SHOP</a>
        <a href="#" style="color: var(--candy-3);">GUMMY BLOG</a>
        <a href="#" style="color: var(--candy-4);">TREAT BOX</a>
        <div style="height: 1px; background: rgba(0,0,0,0.05); margin: 0.5rem 0;"></div>
        <a href="#" class="btn-candy" style="text-align: center;">LOG IN</a>
    </div>

<div class="nav-wrapper" id="navWrap">
        <nav class="candy-nav">
            <a href="#" class="brand">
                <div class="brand-icon">ð</div>
                <span>SugarBase</span>
            </a>

<ul class="links">
                <li><a href="#">DISCOVER</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">COMMUNITY</a></li>
                <li><a href="#">PRICING</a></li>
            </ul>

<div style="display: flex; align-items: center; gap: 1rem;">
                <a href="#" class="btn-candy">GET STARTED</a>
                <div class="burger" id="ham">
                    <div></div>
                    <div style="width: 15px; align-self: flex-end;"></div>
                    <div></div>
                </div>
            </div>
        </nav>
    </div>

<main class="content">
        <div class="bubble">
            <h1>A SWEETER WAY TO BROWSE</h1>
            <p>Welcome to the Playful Candy navbar. It's designed to be friendly, colorful, and satisfying to use. Every interaction has been tuned for a "bouncy" feel that brings joy to the user experience.</p>
        </div>

<div style="display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;">
            <div class="bubble" style="flex: 1; min-width: 250px; padding: 2rem;">
                <h3 style="color: var(--candy-2); font-size: 1.5rem; margin-bottom: 1rem;">JELLY BOUNCE</h3>
                <p>Hover over links to see the custom physics-based animation.</p>
            </div>
            <div class="bubble" style="flex: 1; min-width: 250px; padding: 2rem;">
                <h3 style="color: var(--candy-4); font-size: 1.5rem; margin-bottom: 1rem;">COLOR BURST</h3>
                <p>Each link has its own unique color identity.</p>
            </div>
        </div>
    </main>

// Close when clicking outside
        document.addEventListener('click', (e) => {
            if (mobileMenu.classList.contains('active') && !mobileMenu.contains(e.target)) {
                mobileMenu.classList.remove('active');
            }
        });

// Close on Esc
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') mobileMenu.classList.remove('active');
        });
    </script>

</body>
</html>