Dropdown Navbar Neo Brutalism Design Using HTML, CSS, and JavaScript

on
Dropdown Navbar Neo Brutalism Design Using HTML, CSS, and JavaScript
black and blue lighted computer keyboard

Photo by Vipul Jha on Unsplash

Dropdown Navbar Neo Brutalism Design Using HTML, CSS, and JavaScript

Create a modern, responsive dropdown navbar in the neo-brutalist style using HTML, CSS, and minimal JavaScript, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible design, and maintainable code, ideal for enhanced website navigation.

Prerequisites

  • Basic HTML, CSS, and JavaScript knowledge
  • A code editor (e.g., VS Code)

Part 1: Dropdown Navbar Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist dropdown navbar with a container, navigation with a logo, links, and a dropdown menu.

<div class="neo-nav-container" role="region" aria-label="Neo-brutalist dropdown navigation bars">
    <div class="neo-nav-wrapper" id="nav-primary">
        <nav class="neo-nav" role="navigation" aria-label="Primary navigation">
            <a href="#" class="neo-nav-logo" aria-label="Home page">NeoSite</a>
            <div class="neo-nav-links">
                <a href="#" class="neo-nav-link" aria-label="Home page">Home</a>
                <div class="neo-nav-dropdown" role="menu" aria-label="About menu">
                    <button class="neo-nav-dropdown-button" aria-haspopup="true" aria-expanded="false">About <span class="dropdown-icon">▼</span></button>
                    <div class="neo-nav-dropdown-content" role="menu">
                        <a href="#" role="menuitem" aria-label="Our Team page">Our Team</a>
                        <a href="#" role="menuitem" aria-label="Mission page">Mission</a>
                        <a href="#" role="menuitem" aria-label="History page">History</a>
                    </div>
                </div>
                <a href="#" class="neo-nav-link" aria-label="Services page">Services</a>
                <a href="#" class="neo-nav-link" aria-label="Contact page">Contact</a>
            </div>
        </nav>
    </div>
    <div class="neo-nav-wrapper secondary" id="nav-secondary">
        <nav class="neo-nav" role="navigation" aria-label="Secondary navigation">
            <a href="#" class="neo-nav-logo" aria-label="Home page">BrutalWeb</a>
            <div class="neo-nav-links">
                <a href="#" class="neo-nav-link" aria-label="Home page">Home</a>
                <div class="neo-nav-dropdown" role="menu" aria-label="Portfolio menu">
                    <button class="neo-nav-dropdown-button" aria-haspopup="true" aria-expanded="false">Portfolio <span class="dropdown-icon">▼</span></button>
                    <div class="neo-nav-dropdown-content" role="menu">
                        <a href="#" role="menuitem" aria-label="Projects page">Projects</a>
                        <a href="#" role="menuitem" aria-label="Case Studies page">Case Studies</a>
                        <a href="#" role="menuitem" aria-label="Gallery page">Gallery</a>
                    </div>
                </div>
                <a href="#" class="neo-nav-link" aria-label="Blog page">Blog</a>
                <a href="#" class="neo-nav-link" aria-label="Shop page">Shop</a>
            </div>
        </nav>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the dropdown navbar with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
    
:root {
    --white: #ffffff;
    --light-gray: #f0f0f0;
    --black: #000000;
    --red: #ff1e1e;
    --yellow: #ffd000;
    --blue: #005eff;
    --green: #00ff00;
    --pink: #ff0090;
    --orange: #ff7a00;
    --gray: #c4c4c4;
    --dark-gray: #999999;
    --darker-gray: #111111;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 4px 4px 0 var(--black);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

.neo-nav-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.neo-nav-wrapper {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--white);
    border: 4px solid var(--black);
    box-shadow: var(--shadow-neo);
    border-radius: var(--radius-lg);
}

.neo-nav-wrapper.secondary {
    border-color: var(--yellow);
}

.neo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.neo-nav-logo {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--black);
    text-decoration: none;
}

.neo-nav-links {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.neo-nav-link,
.neo-nav-dropdown-button {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--red);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    border: 3px solid var(--black);
    box-shadow: var(--shadow-neo);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.neo-nav-wrapper.secondary .neo-nav-link,
.neo-nav-wrapper.secondary .neo-nav-dropdown-button {
    background: var(--orange);
}

.neo-nav-link:hover,
.neo-nav-dropdown-button:hover,
.neo-nav-link:focus,
.neo-nav-dropdown-button:focus {
    background: var(--white);
    color: var(--red);
    border-color: var(--red);
    box-shadow: none;
    transform: translate(2px, 2px);
    outline: none;
}

.neo-nav-wrapper.secondary .neo-nav-link:hover,
.neo-nav-wrapper.secondary .neo-nav-dropdown-button:hover,
.neo-nav-wrapper.secondary .neo-nav-link:focus,
.neo-nav-wrapper.secondary .neo-nav-dropdown-button:focus {
    color: var(--orange);
    border-color: var(--orange);
    background: var(--white);
}

.neo-nav-dropdown {
    position: relative;
}

.neo-nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: var(--shadow-neo);
    border-radius: var(--radius-sm);
    min-width: 160px;
    z-index: 10;
}

.neo-nav-wrapper.secondary .neo-nav-dropdown-content {
    border-color: var(--yellow);
}

.neo-nav-dropdown-content a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--black);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--black);
    text-decoration: none;
    background: var(--white);
    transition: all var(--transition);
}

.neo-nav-wrapper.secondary .neo-nav-dropdown-content a {
    border-bottom: 2px solid var(--yellow);
}

.neo-nav-dropdown-content a:last-child {
    border-bottom: none;
}

.neo-nav-dropdown-content a:hover,
.neo-nav-dropdown-content a:focus {
    background: var(--red);
    color: var(--white);
    outline: none;
}

.neo-nav-wrapper.secondary .neo-nav-dropdown-content a:hover,
.neo-nav-wrapper.secondary .neo-nav-dropdown-content a:focus {
    background: var(--orange);
    color: var(--white);
}

.neo-nav-dropdown.active .neo-nav-dropdown-content {
    display: block;
}

.dropdown-icon {
    font-size: 0.75rem;
    margin-left: var(--spacing-xs);
}

@media (max-width: 640px) {
    .neo-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .neo-nav-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

Step 3: JavaScript for Dropdown Toggle (script.js)

Add minimal JavaScript to toggle the dropdown menu visibility, close other dropdowns, and update ARIA attributes for accessibility.

document.querySelectorAll('.neo-nav-dropdown-button').forEach(button => {
    button.addEventListener('click', () => {
        const dropdown = button.parentElement;
        const allDropdowns = document.querySelectorAll('.neo-nav-dropdown');
        allDropdowns.forEach(d => {
            if (d !== dropdown) {
                d.classList.remove('active');
                d.querySelector('.neo-nav-dropdown-button').setAttribute('aria-expanded', 'false');
            }
        });
        const isActive = dropdown.classList.toggle('active');
        button.setAttribute('aria-expanded', isActive);
    });
});

document.addEventListener('click', (e) => {
    document.querySelectorAll('.neo-nav-dropdown').forEach(dropdown => {
        if (!dropdown.contains(e.target)) {
            dropdown.classList.remove('active');
            dropdown.querySelector('.neo-nav-dropdown-button').setAttribute('aria-expanded', 'false');
        }
    });
});

Explanation

  • Layout: The navbar uses a flexbox container (neo-nav-container) to stack navigation wrappers (neo-nav-wrapper) vertically for demo purposes. Each wrapper contains a nav (neo-nav) with a logo (neo-nav-logo), links (neo-nav-links), and a dropdown (neo-nav-dropdown) with a button (neo-nav-dropdown-button) and content (neo-nav-dropdown-content). flex-wrap: wrap ensures flexible layout.
  • Styling: The wrapper has a white background (--white) with 4px black (--black) or yellow (--yellow) borders and a heavy shadow (--shadow-neo). Links and dropdown buttons use 3px black borders with red (--red) or orange (--orange) backgrounds. Dropdown content has a white background with black/yellow borders and separators. IBM Plex Mono is used for text. Hover/focus states invert colors (white background, red/orange text/borders) and remove shadows. A dropdown-icon (▼) enhances visual clarity.
  • Interactivity: JavaScript toggles the active class on neo-nav-dropdown to show/hide content, closes other dropdowns, and updates aria-expanded. Links and buttons have hover/focus states. Clicking outside closes all dropdowns. The logo is a non-interactive link.
  • Visual Feedback: Hovering/focusing links or buttons inverts colors (e.g., red to white, white to red) with a translate(2px, 2px) transform and no shadow. Dropdown items turn red or orange on hover/focus. Focus states remove default outlines for a clean neo-brutalist look.
  • Responsiveness: A media query (@media (max-width: 640px)) stacks the logo, links, and dropdown button vertically with align-items: flex-start, maintaining the neo-brutalist aesthetic for mobile usability.
  • Accessibility: role="region" and aria-label on the container, role="navigation" and aria-label on nav, and role="menu" with aria-label on dropdowns provide screen reader context. Buttons have aria-haspopup="true" and aria-expanded. Links and dropdown items have aria-label or role="menuitem". High contrast ratios (4.5:1 minimum, verified for #ff1e1e, #ff7a00, #000000, #ffffff) and bold typography ensure readability. Keyboard navigation is supported.
UX Tip: Neo-brutalist dropdown navbars should feel bold and tactile with heavy shadows, stark contrasts, and clear navigation. Ensure accessibility with ARIA attributes, keyboard support, and descriptive labels. In production, add active link states, sticky positioning, or a mobile menu toggle, and test across devices.

Accessibility Features

  • Use role="region", role="navigation", and aria-label for semantic structure
  • Include role="menu", aria-haspopup, and aria-expanded for dropdowns
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Support keyboard navigation with clear focus styles
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and descriptive attributes
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist dropdown navbar should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and minimal JavaScript for striking navigation with primary and secondary variants, featuring heavy shadows, thick borders, a monospace font, and vibrant neo-brutalist colors. Experiment with colors, shadow offsets, or add features like nested dropdowns or a mobile menu toggle. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment