Corporate & Professional Style Navbar Template

This navbar uses a corporate & professional style. It's also mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Screenshot of the corporate and professional navbar template

Get Source Code → Preview →

Features

This navbar is designed for business, corporate, and professional websites that need to convey trust, clarity, and organization. It features a dual-level structure with a top bar for secondary information and a main navigation bar for primary site links, including a simple and accessible dropdown menu.

Key Feature: Two-Tiered Structure â€” Includes a top bar for secondary info (contact, social links) and a main navigation bar for primary actions. This organizes information effectively.
Key Feature: Accessible Dropdown Menu â€” The "Services" link includes a clean, simple dropdown menu that is fully navigable using a keyboard, meeting accessibility standards.
Key Feature: Prominent Call-to-Action (CTA) â€” The "Contact Us" button is visually distinct to guide users towards a key conversion goal.
Aesthetic: Clean, structured, and trustworthy. It uses a professional blue accent color, legible sans-serif typography, and generous spacing.
Best Practices: Built mobile-first with a collapsible hamburger menu. The dropdown functionality is handled with JavaScript to ensure `aria-expanded` attributes are correctly managed for accessibility.

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corporate & Professional Navbar with SVG Icons</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Corporate Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #212529;
            --color-text-secondary: #6c757d;
            --color-primary-brand: #0d6efd; /* A professional blue */
            --color-primary-hover: #0b5ed7;
            --color-border: #dee2e6;
            --color-top-bar-bg: #f8f9fa;

--font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 600;

--container-width: 1200px;
            --navbar-padding: 1rem;
            --transition-speed: 0.2s;
        }

/*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }

body {
            margin: 0; font-family: var(--font-family-sans-serif);
            font-size: 1rem; line-height: 1.5; color: var(--color-text-primary);
            background-color: var(--color-background);
        }

.content {
            height: 200vh; padding: 150px var(--navbar-padding) 1rem;
            text-align: center;
        }

ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }

/*
        ========================================
        Header, Top Bar, and Navbar Structure
        ========================================
        */
        .site-header {
            border-bottom: 1px solid var(--color-border);
            position: sticky; top: 0; background-color: var(--color-background); z-index: 1000;
        }
        .header-container {
            width: 100%; max-width: var(--container-width); margin: 0 auto;
            padding: 0 var(--navbar-padding);
        }

.top-bar {
            display: flex; justify-content: space-between; align-items: center;
            background-color: var(--color-top-bar-bg);
            padding: 0.5rem var(--navbar-padding); font-size: 0.875rem;
            color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border);
        }

.top-bar a { display: inline-flex; align-items: center; gap: 0.5em; color: var(--color-text-secondary); }
        .top-bar a:hover, .top-bar a:focus { color: var(--color-primary-brand); }
        .top-bar-section { display: flex; align-items: center; gap: 1rem; }

.main-navbar {
            display: flex; justify-content: space-between; align-items: center; height: 80px;
        }
        .main-navbar__brand { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }

/*
        ========================================
        SVG Icon Styling
        ========================================
        */
        .icon {
            width: 1em; /* Makes icon size relative to font-size */
            height: 1em;
            fill: currentColor; /* Inherits color from parent link. VERY powerful. */
            transition: fill var(--transition-speed) ease;
        }

/*
        ========================================
        Mobile Menu and Dropdown
        ========================================
        */
        .main-navbar__toggle {
            display: block; border: 1px solid var(--color-border); border-radius: 4px; padding: 0.5rem;
            background: transparent; cursor: pointer; z-index: 1001;
        }
        .main-navbar__toggle .bar {
            display: block; width: 22px; height: 2px; margin: 5px 0; background-color: var(--color-text-primary);
            transition: transform var(--transition-speed) ease;
        }
        .main-navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .main-navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .main-navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-navbar__menu {
            display: none; position: absolute; top: 100%; left: 0; width: 100%;
            background-color: var(--color-background); border-bottom: 1px solid var(--color-border);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        .main-navbar__menu.is-active { display: block; }
        .main-navbar__item { border-top: 1px solid var(--color-border); }
        .main-navbar__link {
            display: flex; /* Using flex to align text and dropdown arrow */
            justify-content: space-between; align-items: center;
            padding: 1rem 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary);
        }
        .main-navbar__link:hover, .main-navbar__link:focus { color: var(--color-primary-brand); }
        .dropdown { position: relative; }
        .dropdown > .main-navbar__link::after { content: '\25BC'; font-size: 0.7em; }
        .dropdown-menu { display: none; background-color: var(--color-top-bar-bg); }
        .dropdown.is-active > .dropdown-menu { display: block; }
        .dropdown-menu a { padding-left: 2.5rem; }

/* Accessible focus state */
        :is(.main-navbar__toggle, .top-bar a, .main-navbar__link):focus-visible {
            outline: 2px solid var(--color-primary-brand); outline-offset: 2px; border-radius: 4px;
        }

/*
        ========================================
        Desktop Navbar Styles (Responsive)
        ========================================
        */
        @media (min-width: 992px) {
            .main-navbar__toggle { display: none; }
            .main-navbar__menu { display: flex; align-items: center; position: static; width: auto; background: none; border: none; box-shadow: none; }
            .main-navbar__list { display: flex; align-items: center; gap: 0.5rem; }
            .main-navbar__item { border: none; }
            .main-navbar__link { display: inline-flex; padding: 0.75rem 1rem; border-radius: 4px; }
            .main-navbar__link:hover, .main-navbar__link:focus { background-color: var(--color-top-bar-bg); }
            
            .dropdown { position: relative; } /* Re-affirm for desktop */
            .dropdown > .main-navbar__link::after { content: '\25BC'; font-size: 0.7em; display: inline-block; margin-left: 0.5em; }
            .dropdown:hover .dropdown-menu { display: block; }
            .dropdown-menu {
                display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background-color: var(--color-background);
                border: 1px solid var(--color-border); box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 4px;
                padding: 0.5rem 0; z-index: 1010;
            }
            .dropdown-menu a { display: block; padding: 0.5rem 1rem; font-weight: var(--font-weight-normal); }
            .dropdown-menu a:hover, .dropdown-menu a:focus { background-color: var(--color-top-bar-bg); color: var(--color-primary-brand); }
            
            .main-navbar__link--cta {
                background-color: var(--color-primary-brand); color: var(--color-background); margin-left: 1rem;
            }
            .main-navbar__link--cta:hover, .main-navbar__link--cta:focus {
                background-color: var(--color-primary-hover); color: var(--color-background);
            }
        }
        
        @media (max-width: 576px) { .contact-info__text { display: none; } }
    </style>
</head>
<body>

<header class="site-header">
        <div class="top-bar header-container">
            <div class="top-bar-section">
                <a href="tel:1-800-555-1234">
                    
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/></svg>
                    <span class="contact-info__text">1-800-555-1234</span>
                </a>
                <a href="mailto:info@yourcorp.com">
                    
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>
                    <span class="contact-info__text">info@yourcorp.com</span>
                </a>
            </div>
            <div class="top-bar-section social-links">
                
                <a href="#" aria-label="Our LinkedIn Profile">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.5,10.43 13,11.1V10.13H10.13V18.5H13V13.57C13,12.8 13.12,12.04 14.14,12.04C15.16,12.04 15.24,12.95 15.24,13.66V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,6 8,5.44 7.22,5.44C6.44,5.44 5.88,6 5.88,6.88A1.68,1.68 0 0,0 6.88,8.56M8.13,18.5V10.13H5.63V18.5H8.13Z"/></svg>
                </a>
                <a href="#" aria-label="Our Twitter Profile">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"/></svg>
                </a>
            </div>
        </div>
        <div class="main-navbar header-container">
            <a href="#" class="main-navbar__brand" aria-label="Homepage">YourCorp</a>
            
            <button class="main-navbar__toggle" 
                    id="navbarToggle" 
                    aria-label="Toggle navigation" 
                    aria-controls="navbarMenu" 
                    aria-expanded="false">
                <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            </button>
            
            <nav id="navbarMenu" class="main-navbar__menu" role="navigation" aria-labelledby="navbarToggle">
                <ul class="main-navbar__list">
                    <li class="main-navbar__item"><a href="#" class="main-navbar__link">Home</a></li>
                    
                    <li class="main-navbar__item dropdown">
                        <a href="#" class="main-navbar__link" 
                           id="services-dropdown"
                           role="button" 
                           aria-haspopup="true" 
                           aria-expanded="false">Services</a>
                        <ul class="dropdown-menu" aria-labelledby="services-dropdown">
                            <li><a href="#">Web Development</a></li>
                            <li><a href="#">Digital Marketing</a></li>
                            <li><a href="#">Cloud Solutions</a></li>
                            <li><a href="#">Consulting</a></li>
                        </ul>
                    </li>

<li class="main-navbar__item"><a href="#" class="main-navbar__link">About Us</a></li>
                    <li class="main-navbar__item"><a href="#" class="main-navbar__link">Blog</a></li>
                    <li class="main-navbar__item main-navbar__item--cta">
                        <a href="#" class="main-navbar__link main-navbar__link--cta">Contact Us</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="content">
        <h1>Welcome to YourCorp</h1>
        <p>This page content demonstrates how the sticky header stays at the top of the viewport when you scroll.</p>
    </main>

if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', function () {
                navbarToggle.classList.toggle('is-active');
                navbarMenu.classList.toggle('is-active');

const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
                navbarToggle.setAttribute('aria-expanded', !isExpanded);
            });
        }
        
        // --- Accessible Dropdown Toggle ---
        // This script ensures dropdowns are accessible, especially on mobile
        // where hover is not an option. It also manages ARIA attributes.
        const dropdowns = document.querySelectorAll('.dropdown > .main-navbar__link');

dropdowns.forEach(function(dropdownToggle) {
            // Check if the dropdown is a link that should not navigate on first click
            // For this example, the main 'Services' link is just a toggle, not a destination page
            dropdownToggle.addEventListener('click', function(event) {
                // Prevent navigation if it's just for opening the dropdown
                event.preventDefault();
                
                const parentDropdown = dropdownToggle.parentElement;
                parentDropdown.classList.toggle('is-active');

const isExpanded = dropdownToggle.getAttribute('aria-expanded') === 'true';
                dropdownToggle.setAttribute('aria-expanded', !isExpanded);
            });
        });

// Optional: Close dropdowns if user clicks outside of them
        document.addEventListener('click', function(event) {
            const openDropdown = document.querySelector('.dropdown.is-active');
            if (openDropdown && !openDropdown.contains(event.target)) {
                openDropdown.classList.remove('is-active');
                const toggle = openDropdown.querySelector('[aria-expanded="true"]');
                if (toggle) {
                    toggle.setAttribute('aria-expanded', 'false');
                }
            }
        });
    });
    </script>
</body>
</html>

View Output