Skip to main content

Overview

The Navbar component provides a fixed-position navigation header with a responsive mobile menu. It features a neobrutalist design with bold borders, prominent shadows, and animated hamburger menu toggle.
The Navbar is positioned fixed at the top of the viewport with z-index: 50, ensuring it stays above other content while scrolling.

Component Structure

The Navbar is built with React hooks and CSS Modules:
  • Location: src/components/Navbar/Navbar.jsx
  • Styles: src/components/Navbar/Navbar.module.css
  • Dependencies: Custom Checkbox component for mobile menu toggle

Implementation

Basic Usage

import Navbar from './components/Navbar/Navbar';

export default function App() {
  return (
    <>
      <Navbar />
      {/* Rest of your app */}
    </>
  );
}

Full Component Code

import styles from './Navbar.module.css';
import { useState } from 'react';
import Checkbox from './Checkbox';

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header className={styles.nav}>
      <div className={`container ${styles.inner}`}>
        <a href="#hero" className={styles.logo}>ITZHYPER.PORTFOLIO</a>

        <nav className={styles.links + ' ' + (isOpen ? styles.open : '')}>
          <a href="#about" className={styles.navLink} onClick={() => setIsOpen(false)} >ABOUT</a>
          <a download href="/CV_Gustavo_Peralta.pdf" className={styles.outlineBtn} onClick={() => setIsOpen(false)}>DOWNLOAD RESUME</a>
          <a href="#contact" className={styles.ctaBtn} onClick={() => setIsOpen(false)}>GET IN TOUCH</a>
        </nav>
        
        <div className={styles.menuBtn}>
          <Checkbox handleMenuToggle={() => setIsOpen(!isOpen)} isOpen={isOpen} />
        </div>
      </div>
    </header>
  );
}

State Management

The component uses a single isOpen state to control the mobile menu visibility:
const [isOpen, setIsOpen] = useState(false);
  • isOpen: Boolean controlling mobile menu open/closed state
  • Mobile menu automatically closes when navigation links are clicked
  • Hamburger icon animates based on isOpen state
The Navbar includes three main navigation elements:
Outlined button styled with .outlineBtn class:
  • Downloads CV_Gustavo_Peralta.pdf on click
  • Neobrutalist border and shadow effect
  • Hover inverts colors (fills with primary color)
Primary CTA styled with .ctaBtn class:
  • Filled with primary color by default
  • Smooth scroll to #contact section
  • Hover effect removes fill and adds border

CSS Module Styling

Key Classes

Responsive Behavior

@media (min-width: 768px) {
  .links {
    display: flex; /* Show nav links inline */
  }
  
  .menuBtn {
    display: none; /* Hide hamburger menu */
  }
}

Checkbox Component

The mobile menu toggle uses a custom animated hamburger icon: Location: src/components/Navbar/Checkbox.jsx
import React from 'react';
import styled from 'styled-components';

const Checkbox = ({handleMenuToggle, isOpen}) => {
  return (
    <StyledWrapper>
      <label className="burger" htmlFor="burger">
        <input type="checkbox" id="burger" onChange={handleMenuToggle} checked={isOpen} />
        <span />
        <span />
        <span />
      </label>
    </StyledWrapper>
  );
}
Props:
  • handleMenuToggle: Function to toggle menu state
  • isOpen: Boolean to control checked state and animation
Animation: Three spans rotate into an X when checked (45deg and -45deg rotation).

Customization

Change Logo Text

<a href="#hero" className={styles.logo}>YOUR.BRAND</a>
<nav className={styles.links + ' ' + (isOpen ? styles.open : '')}>
  <a href="#about" className={styles.navLink}>ABOUT</a>
  <a href="#services" className={styles.navLink}>SERVICES</a>
  <a href="#blog" className={styles.navLink}>BLOG</a>
  {/* ... */}
</nav>

Modify Colors

Update CSS variables in your global styles:
:root {
  --color-primary: #00ff88; /* Change accent color */
  --color-bg-dark: #0a0a0f; /* Change background */
  --shadow-neo-sm: 4px 4px 0 0 var(--color-primary); /* Adjust shadows */
}

Change Navbar Height

.inner {
  height: 100px; /* Default: 80px */
}

.open {
  top: 100px; /* Match navbar height */
}

Design Pattern

The Navbar follows the neobrutalist design aesthetic:
  • Bold 2px borders in primary color
  • Hard box shadows (no blur)
  • Shadow offset animation on hover (translate(2px, 2px))
  • High contrast colors
  • Uppercase typography
  • Tight letter-spacing (-0.05em)

Accessibility

  • Semantic <header> and <nav> elements
  • Clickable logo returns to hero section
  • Mobile menu closes on link click for better UX
  • Hamburger menu uses hidden checkbox for keyboard accessibility
  • All interactive elements have hover states

Performance Notes

  • Fixed positioning uses GPU acceleration
  • Transitions limited to transform and box-shadow (performant properties)
  • CSS Modules provide scoped styles with no runtime cost
  • Single state variable minimizes re-renders

Build docs developers (and LLMs) love