DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Minimal Pro Navbar - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Minimal Pro Navbar
rohitwushu
Jan 23, 2026
7
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="top-bar"> <div class="top-bar-content"> <div class="top-left"> <span class="top-item">📍 New York, USA</span> <span class="top-divider">|</span> <span class="top-item">✉️ hello@example.com</span> </div> <div class="top-right"> <a href="#" class="social-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> </svg> </a> <a href="#" class="social-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </a> <a href="#" class="social-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> </svg> </a> </div> </div> </div> <!-- Main Navbar --> <nav class="navbar" id="navbar"> <div class="container"> <!-- Logo --> <a href="#" class="logo"> <div class="logo-box"> <span class="logo-letter">U</span> </div> <div class="logo-content"> <span class="logo-name">UIBLITZ</span> <span class="logo-sub">Creative Agency</span> </div> </a> <!-- Desktop Menu --> <ul class="nav-menu"> <li class="nav-item"> <a href="#home" class="nav-link active"> <span>Home</span> <div class="nav-dot"></div> </a> </li> <li class="nav-item dropdown"> <a href="#services" class="nav-link"> <span>Services</span> <svg class="dropdown-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> <div class="nav-dot"></div> </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Web Design</a> <a href="#" class="dropdown-item">Development</a> <a href="#" class="dropdown-item">Branding</a> <a href="#" class="dropdown-item">Marketing</a> </div> </li> <li class="nav-item"> <a href="#portfolio" class="nav-link"> <span>Portfolio</span> <div class="nav-dot"></div> </a> </li> <li class="nav-item"> <a href="#about" class="nav-link"> <span>About</span> <div class="nav-dot"></div> </a> </li> <li class="nav-item"> <a href="#contact" class="nav-link"> <span>Contact</span> <div class="nav-dot"></div> </a> </li> </ul> <!-- Right Actions --> <div class="nav-actions"> <div class="language-selector"> <button class="lang-btn"> <span>EN</span> <svg width="10" height="10" viewBox="0 0 10 10" fill="none"> <path d="M2 3L5 6L8 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg> </button> </div> <button class="primary-btn"> <span>Get Quote</span> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M1 8H15M15 8L9 2M15 8L9 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> </div> <!-- Mobile Toggle --> <button class="mobile-toggle" id="mobileToggle"> <span></span> <span></span> <span></span> </button> </div> </nav> <!-- Mobile Menu --> <div class="mobile-nav" id="mobileNav"> <div class="mobile-nav-wrapper"> <div class="mobile-header"> <div class="mobile-logo"> <div class="logo-box small"> <span class="logo-letter">V</span> </div> <span class="mobile-logo-text">Velocity</span> </div> <button class="mobile-close" id="mobileClose"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/> </svg> </button> </div> <div class="mobile-content"> <ul class="mobile-menu"> <li class="mobile-item"> <a href="#home" class="mobile-link"> <span class="mobile-number">01</span> <span class="mobile-text">Home</span> </a> </li> <li class="mobile-item has-submenu"> <button class="mobile-link submenu-toggle"> <span class="mobile-number">02</span> <span class="mobile-text">Services</span> <svg class="submenu-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M3 5L7 9L11 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </button> <ul class="mobile-submenu"> <li><a href="#" class="submenu-link">Web Design</a></li> <li><a href="#" class="submenu-link">Development</a></li> <li><a href="#" class="submenu-link">Branding</a></li> <li><a href="#" class="submenu-link">Marketing</a></li> </ul> </li> <li class="mobile-item"> <a href="#portfolio" class="mobile-link"> <span class="mobile-number">03</span> <span class="mobile-text">Portfolio</span> </a> </li> <li class="mobile-item"> <a href="#about" class="mobile-link"> <span class="mobile-number">04</span> <span class="mobile-text">About</span> </a> </li> <li class="mobile-item"> <a href="#contact" class="mobile-link"> <span class="mobile-number">05</span> <span class="mobile-text">Contact</span> </a> </li> </ul> <div class="mobile-footer"> <button class="mobile-cta-btn">Get a Free Quote</button> <div class="mobile-info"> <p>📍 New York, USA</p> <p>✉️ hello@example.com</p> </div> </div> </div> </div> </div>
1
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #6366f1; --dark: #0f172a; --light: #ffffff; --gray: #64748b; --border: #e2e8f0; --hover: #f8fafc; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%); } /* Top Bar */ .top-bar { background: var(--dark); color: var(--light); font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .top-bar-content { max-width: 1400px; margin: 0 auto; padding: 0.75rem 2rem; display: flex; justify-content: space-between; align-items: center; } .top-left { display: flex; gap: 1rem; align-items: center; } .top-item { opacity: 0.9; } .top-divider { opacity: 0.3; } .top-right { display: flex; gap: 0.75rem; } .social-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: all 0.3s ease; border-radius: 6px; } .social-icon:hover { color: var(--light); background: rgba(255, 255, 255, 0.1); } /* Main Navbar */ .navbar { position: sticky; top: 0; background: var(--light); border-bottom: 1px solid var(--border); z-index: 100; transition: all 0.3s ease; } .navbar.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 80px; } /* Logo */ .logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; transition: transform 0.3s ease; } .logo:hover { transform: translateY(-2px); } .logo-box { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), #8b5cf6); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .logo-box.small { width: 36px; height: 36px; border-radius: 8px; } .logo-letter { color: var(--light); font-size: 1.5rem; font-weight: 700; } .logo-content { display: flex; flex-direction: column; gap: 0.15rem; } .logo-name { font-size: 1.35rem; font-weight: 700; color: var(--dark); } .logo-sub { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; } /* Desktop Menu */ .nav-menu { display: flex; list-style: none; gap: 0.5rem; align-items: center; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; text-decoration: none; color: var(--dark); font-weight: 500; font-size: 0.95rem; border-radius: 8px; transition: all 0.3s ease; position: relative; } .nav-link:hover { background: var(--hover); color: var(--primary); } .nav-link.active { color: var(--primary); } .nav-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .nav-link.active .nav-dot { opacity: 1; } .dropdown-icon { transition: transform 0.3s ease; opacity: 0.6; } .dropdown.active .dropdown-icon { transform: rotate(180deg); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--light); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem; margin-top: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: block; padding: 0.75rem 1rem; text-decoration: none; color: var(--dark); border-radius: 8px; font-size: 0.9rem; transition: all 0.2s ease; } .dropdown-item:hover { background: var(--hover); color: var(--primary); padding-left: 1.25rem; } /* Nav Actions */ .nav-actions { display: flex; align-items: center; gap: 1rem; } .language-selector { position: relative; } .lang-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--dark); font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .lang-btn:hover { background: var(--hover); border-color: var(--primary); } .primary-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--primary); border: none; border-radius: 8px; color: var(--light); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; } .primary-btn:hover { background: #4f46e5; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); } /* Mobile Toggle */ .mobile-toggle { display: none; flex-direction: column; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0.5rem; } .mobile-toggle span { width: 26px; height: 2.5px; background: var(--dark); border-radius: 2px; transition: all 0.3s ease; } /* Mobile Nav */ .mobile-nav { position: fixed; top: 0; left: -100%; width: 100%; max-width: 400px; height: 100vh; background: var(--light); z-index: 1000; transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); overflow-y: auto; } .mobile-nav.active { left: 0; } .mobile-nav-wrapper { height: 100%; display: flex; flex-direction: column; } .mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border); } .mobile-logo { display: flex; align-items: center; gap: 0.75rem; } .mobile-logo-text { font-size: 1.25rem; font-weight: 700; color: var(--dark); } .mobile-close { width: 40px; height: 40px; background: var(--hover); border: none; border-radius: 8px; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .mobile-close:hover { background: var(--border); transform: rotate(90deg); } .mobile-content { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; } .mobile-menu { list-style: none; } .mobile-item { margin-bottom: 0.5rem; opacity: 0; transform: translateX(-30px); } .mobile-nav.active .mobile-item:nth-child(1) { animation: slideRight 0.4s ease 0.1s forwards; } .mobile-nav.active .mobile-item:nth-child(2) { animation: slideRight 0.4s ease 0.2s forwards; } .mobile-nav.active .mobile-item:nth-child(3) { animation: slideRight 0.4s ease 0.3s forwards; } .mobile-nav.active .mobile-item:nth-child(4) { animation: slideRight 0.4s ease 0.4s forwards; } .mobile-nav.active .mobile-item:nth-child(5) { animation: slideRight 0.4s ease 0.5s forwards; } @keyframes slideRight { to { opacity: 1; transform: translateX(0); } } .mobile-link { display: flex; align-items: center; gap: 1rem; padding: 1rem; text-decoration: none; color: var(--dark); font-size: 1.1rem; font-weight: 600; border-radius: 10px; transition: all 0.3s ease; background: transparent; border: none; width: 100%; cursor: pointer; text-align: left; } .mobile-link:hover { background: var(--hover); padding-left: 1.5rem; } .mobile-number { font-size: 0.85rem; color: var(--gray); font-weight: 400; } .mobile-text { flex: 1; } .submenu-arrow { transition: transform 0.3s ease; opacity: 0.6; } .mobile-item.open .submenu-arrow { transform: rotate(180deg); } .mobile-submenu { list-style: none; padding-left: 3rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mobile-item.open .mobile-submenu { max-height: 300px; padding-top: 0.5rem; } .submenu-link { display: block; padding: 0.75rem 1rem; color: var(--gray); text-decoration: none; font-size: 0.95rem; border-radius: 8px; transition: all 0.2s ease; } .submenu-link:hover { color: var(--primary); background: var(--hover); padding-left: 1.25rem; } .mobile-footer { padding-top: 1.5rem; border-top: 1px solid var(--border); } .mobile-cta-btn { width: 100%; padding: 1rem; background: var(--primary); border: none; border-radius: 10px; color: var(--light); font-weight: 600; font-size: 1rem; cursor: pointer; margin-bottom: 1.5rem; transition: all 0.3s ease; } .mobile-cta-btn:hover { background: #4f46e5; transform: translateY(-2px); } .mobile-info { display: flex; flex-direction: column; gap: 0.5rem; } .mobile-info p { color: var(--gray); font-size: 0.9rem; } /* Hero */ .hero { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; padding: 2rem; } .hero-wrapper { text-align: center; max-width: 700px; } .hero-wrapper h1 { font-size: 4rem; font-weight: 800; color: var(--dark); margin-bottom: 1rem; line-height: 1.2; } .hero-wrapper p { font-size: 1.25rem; color: var(--gray); } /* Responsive */ @media (max-width: 1024px) { .top-bar { display: none; } .nav-menu, .nav-actions { display: none; } .mobile-toggle { display: flex; } .hero-wrapper h1 { font-size: 3rem; } } @media (max-width: 480px) { .container { padding: 0 1rem; } .mobile-nav { max-width: 100%; } .logo-name { font-size: 1.15rem; } .logo-sub { font-size: 0.7rem; } .hero-wrapper h1 { font-size: 2rem; } .hero-wrapper p { font-size: 1rem; } }
1
const navbar = document.getElementById('navbar'); const mobileToggle = document.getElementById('mobileToggle'); const mobileNav = document.getElementById('mobileNav'); const mobileClose = document.getElementById('mobileClose'); const body = document.body; // Mobile menu toggle mobileToggle.addEventListener('click', () => { mobileNav.classList.add('active'); body.style.overflow = 'hidden'; }); mobileClose.addEventListener('click', () => { mobileNav.classList.remove('active'); body.style.overflow = ''; }); // Close on link click document.querySelectorAll('.mobile-link:not(.submenu-toggle)').forEach(link => { link.addEventListener('click', () => { mobileNav.classList.remove('active'); body.style.overflow = ''; }); }); // Mobile submenu toggle document.querySelectorAll('.submenu-toggle').forEach(toggle => { toggle.addEventListener('click', function() { this.parentElement.classList.toggle('open'); }); }); // Navbar scroll effect window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Desktop dropdown document.querySelectorAll('.dropdown').forEach(dropdown => { dropdown.addEventListener('mouseenter', function() { this.classList.add('active'); }); dropdown.addEventListener('mouseleave', function() { this.classList.remove('active'); }); }); // Active link document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', function(e) { if (!this.parentElement.classList.contains('dropdown')) { document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); this.classList.add('active'); } }); });
Comments
1
Want to comment?
Please
login
or
sign up
to post comments.
rohitwushu
Jan 23, 2026 at 02:26 PM
Great
Comments 1
Want to comment?
Please login or sign up to post comments.
rohitwushu
Great