Skip to main content

​
Overview

The Footer component provides a simple footer with copyright information. It’s a stateless component that appears at the bottom of every page.

​
Usage

import { Footer } from '@/components'

function App() {
  return (
    <>
      {/* Your app content */}
      <Footer />
    </>
  )
}

​
Props

The Footer component does not accept any props. It displays static copyright text.

​
Component Structure

export const Footer = () => {
  return (
    <>
      <footer>
        <small>&copy; 2025 DevJobs. Todos los derechos reservados.</small>
      </footer>
    </>
  )
}

​
Features

Displays the copyright symbol, year (2025), and company name with standard legal text in Spanish.

​
Semantic HTML

Uses the <footer> semantic HTML element for better accessibility and SEO.

​
Typography

Wraps the copyright text in a <small> element, which is semantically appropriate for fine print and legal information.

​
Styling

The Footer component relies on global CSS styles applied to the <footer> element. No component-specific styles or CSS modules are used.

​
Integration

​
Layout Pattern

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

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

​
App-level Implementation

import { Header, Footer } from '@/components'

function App() {
  return (
    <div className="app">
      <Header />
      
      <main className="main-content">
        {/* Your routes and content */}
      </main>
      
      <Footer />
    </div>
  )
}

​
Customization

To customize the footer text, you would need to modify the component directly: 
export const Footer = () => {
  const currentYear = new Date().getFullYear()
  
  return (
    <footer>
      <small>&copy; {currentYear} DevJobs. All rights reserved.</small>
    </footer>
  )
}

​
Source Code

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

Header

Companion header component

Components Overview

View all available components

​
Best Practices

  1. Place at the bottom - The Footer should be rendered at the bottom of your application layout
  2. Use once - Only include one Footer component per page
  3. Pair with Header - Use together with the Header component for consistency
  4. Sticky footer - Consider using CSS to make the footer stick to the bottom of the viewport on short pages

​
Accessibility

  • Uses semantic <footer> element for better screen reader support
  • Uses <small> element to indicate fine print content
  • Automatically understood as landmark region by assistive technologies

Build docs developers (and LLMs) love

Get started for freeTalk to us