Skip to main content

​
Overview

The Header component provides the main application header with the DevJobs branding and navigation links. It’s a simple, stateless component that appears at the top of every page.

​
Usage

import { Header } from '@/components'

function App() {
  return (
    <>
      <Header />
      {/* Rest of your app */}
    </>
  )
}

​
Props

The Header component does not accept any props. It’s a static component with fixed branding and navigation.

​
Features

​
Branding

The header displays the DevJobs logo (a code bracket SVG icon) and brand name. The entire branding section is clickable and navigates to the home page. 
<Link href='/' style={{ textDecoration: 'none' }}>
  <h1 style={{ color: 'white' }}>
    <svg>...</svg>
    DevJobs
  </h1>
</Link>
The header includes a navigation section with a link to the jobs search page. It uses React Router’s NavLink component to highlight the active page. 
<nav>
  <NavLink
    className={({ isActive }) => isActive ? 'nav-link-active' : ''}
    to="/search">
    Empleos
  </NavLink>
</nav>

​
Styling

The Header component uses global CSS styles and inline styles for specific elements:
  • The <header> element receives global styling
  • The logo uses color: 'white' inline styling
  • Active navigation links receive the nav-link-active class

​
Component Structure

import { NavLink } from "react-router-dom"
import { Link } from "@/components"

export const Header = () => {
  return (
    <>
      <header>
        <Link href='/' style={{ textDecoration: 'none' }}>
          <h1 style={{ color: 'white' }}>
            <svg fill="none" stroke="currentColor" strokeLinecap="round" 
                 strokeLinejoin="round" strokeWidth="2"
                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <polyline points="16 18 22 12 16 6"></polyline>
              <polyline points="8 6 2 12 8 18"></polyline>
            </svg>
            DevJobs
          </h1>
        </Link>

        <nav>
          <NavLink
            className={({ isActive }) => isActive ? 'nav-link-active' : ''}
            to="/search">
            Empleos
          </NavLink>
        </nav>
      </header>
    </>
  )
}

​
Integration

​
With React Router

The Header component requires React Router to be configured in your application since it uses NavLink for navigation. 
import { BrowserRouter } from 'react-router-dom'
import { Header } from '@/components'

function App() {
  return (
    <BrowserRouter>
      <Header />
      {/* Routes */}
    </BrowserRouter>
  )
}

​
Layout Pattern

Typically used with the Footer component to create a consistent layout: 
import { Header, Footer } from '@/components'

function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  )
}

​
Dependencies

  • react-router-dom - For the NavLink component
  • @/components - For the custom Link component

​
Source Code

Location: src/components/Header/Header.jsx:1

Footer

Companion footer component

Components Overview

View all available components

​
Best Practices

  1. Place at the top - The Header should be rendered at the top of your application layout
  2. Use once - Only include one Header component per page
  3. Pair with Footer - Use together with the Footer component for consistency
  4. Router context - Ensure React Router is configured before using Header

Build docs developers (and LLMs) love

Get started for freeTalk to us