Footer

Overview

The Footer component provides consistent footer patterns with navigation links, social media, copyright information, and additional site-wide content.

Basic Usage

import { Footer } from '@yourproject/components';

function Example() {
  return (
    <Footer 
      copyright="© 2024 Your Company. All rights reserved."
    />
  );
}

Simple
With Links
With Columns
With Social

<Footer copyright="© 2024 Company Name" />

Minimal footer with just copyright text.

<Footer 
  links={[
    { label: 'Privacy Policy', href: '/privacy' },
    { label: 'Terms of Service', href: '/terms' },
    { label: 'Contact', href: '/contact' }
  ]}
  copyright="© 2024 Company Name"
/>

Footer with navigation links.

<Footer 
  columns={[
    {
      title: 'Product',
      links: [
        { label: 'Features', href: '/features' },
        { label: 'Pricing', href: '/pricing' },
        { label: 'FAQ', href: '/faq' }
      ]
    },
    {
      title: 'Company',
      links: [
        { label: 'About', href: '/about' },
        { label: 'Blog', href: '/blog' },
        { label: 'Careers', href: '/careers' }
      ]
    }
  ]}
  copyright="© 2024 Company Name"
/>

Multi-column footer with organized link groups.

<Footer 
  social={[
    { platform: 'twitter', href: 'https://twitter.com/company' },
    { platform: 'github', href: 'https://github.com/company' },
    { platform: 'linkedin', href: 'https://linkedin.com/company' }
  ]}
  copyright="© 2024 Company Name"
/>

Footer with social media links.

Multi-Column Layout

import { Footer, FooterColumn, FooterLink } from '@yourproject/components';

function Example() {
  return (
    <Footer>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem' }}>
        <FooterColumn title="Product">
          <FooterLink href="/features">Features</FooterLink>
          <FooterLink href="/pricing">Pricing</FooterLink>
          <FooterLink href="/changelog">Changelog</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Company">
          <FooterLink href="/about">About</FooterLink>
          <FooterLink href="/blog">Blog</FooterLink>
          <FooterLink href="/careers">Careers</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Resources">
          <FooterLink href="/docs">Documentation</FooterLink>
          <FooterLink href="/guides">Guides</FooterLink>
          <FooterLink href="/api">API Reference</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Legal">
          <FooterLink href="/privacy">Privacy</FooterLink>
          <FooterLink href="/terms">Terms</FooterLink>
          <FooterLink href="/security">Security</FooterLink>
        </FooterColumn>
      </div>
    </Footer>
  );
}

Props

string

array

Array of link objects: { label: string, href: string }[]

array

Array of column objects with title and links

Array of social media links: { platform: string, href: string }[]

ReactNode

Logo or brand element to display

string

default:"default"

Visual style: default or minimal

ReactNode

Custom footer content

string

Additional CSS class names

FooterColumn Props

string

required

Column heading

ReactNode

required

Column content (typically FooterLink components)

FooterLink Props

string

required

Link destination

ReactNode

required

Link text

boolean

default:"false"

Opens link in new tab if true

TypeScript Interfaces

interface Link {
  label: string;
  href: string;
  external?: boolean;
}

interface Column {
  title: string;
  links: Link[];
}

interface SocialLink {
  platform: 'twitter' | 'github' | 'linkedin' | 'facebook' | 'instagram' | 'youtube';
  href: string;
}

interface FooterProps {
  copyright?: string;
  links?: Link[];
  columns?: Column[];
  social?: SocialLink[];
  logo?: React.ReactNode;
  variant?: 'default' | 'minimal';
  children?: React.ReactNode;
  className?: string;
}

interface FooterColumnProps {
  title: string;
  children: React.ReactNode;
  className?: string;
}

interface FooterLinkProps {
  href: string;
  children: React.ReactNode;
  external?: boolean;
}

Complete Examples

import { Footer, FooterColumn, FooterLink } from '@yourproject/components';
import { Twitter, Github, Linkedin } from 'lucide-react';

function SiteFooter() {
  return (
    <Footer 
      logo={
        <div>
          <img src="/logo.svg" alt="Company" />
          <p>Building the future of software</p>
        </div>
      }
      social={[
        { platform: 'twitter', href: 'https://twitter.com/company' },
        { platform: 'github', href: 'https://github.com/company' },
        { platform: 'linkedin', href: 'https://linkedin.com/company' }
      ]}
      copyright="© 2024 Your Company. All rights reserved."
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '3rem' }}>
        <FooterColumn title="Product">
          <FooterLink href="/features">Features</FooterLink>
          <FooterLink href="/pricing">Pricing</FooterLink>
          <FooterLink href="/security">Security</FooterLink>
          <FooterLink href="/roadmap">Roadmap</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Company">
          <FooterLink href="/about">About Us</FooterLink>
          <FooterLink href="/blog">Blog</FooterLink>
          <FooterLink href="/careers">Careers</FooterLink>
          <FooterLink href="/press">Press Kit</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Resources">
          <FooterLink href="/docs">Documentation</FooterLink>
          <FooterLink href="/guides">Guides</FooterLink>
          <FooterLink href="/api">API Reference</FooterLink>
          <FooterLink href="/support">Support</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Legal">
          <FooterLink href="/privacy">Privacy Policy</FooterLink>
          <FooterLink href="/terms">Terms of Service</FooterLink>
          <FooterLink href="/cookies">Cookie Policy</FooterLink>
          <FooterLink href="/licenses">Licenses</FooterLink>
        </FooterColumn>
      </div>
    </Footer>
  );
}

import { Footer } from '@yourproject/components';

function MinimalFooter() {
  return (
    <Footer 
      variant="minimal"
      links={[
        { label: 'Privacy', href: '/privacy' },
        { label: 'Terms', href: '/terms' },
        { label: 'Contact', href: '/contact' }
      ]}
      copyright="© 2024 Company Name"
    />
  );
}

import { Footer, FooterColumn, FooterLink, Input, Button } from '@yourproject/components';
import { useState } from 'react';

function AppFooter() {
  const [email, setEmail] = useState('');
  
  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle newsletter subscription
  };
  
  return (
    <Footer copyright="© 2024 Your App">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: '3rem' }}>
        <div>
          <h3>Stay Updated</h3>
          <p>Get the latest updates and news delivered to your inbox.</p>
          <form onSubmit={handleSubscribe} style={{ marginTop: '1rem' }}>
            <Input 
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <Button type="submit" style={{ marginTop: '0.5rem' }}>
              Subscribe
            </Button>
          </form>
        </div>
        
        <FooterColumn title="Product">
          <FooterLink href="/features">Features</FooterLink>
          <FooterLink href="/pricing">Pricing</FooterLink>
          <FooterLink href="/updates">Updates</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Support">
          <FooterLink href="/help">Help Center</FooterLink>
          <FooterLink href="/contact">Contact</FooterLink>
          <FooterLink href="/status">Status</FooterLink>
        </FooterColumn>
        
        <FooterColumn title="Legal">
          <FooterLink href="/privacy">Privacy</FooterLink>
          <FooterLink href="/terms">Terms</FooterLink>
        </FooterColumn>
      </div>
    </Footer>
  );
}

Layout Integration

import { Footer, Container } from '@yourproject/components';

function Layout({ children }) {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <main style={{ flex: 1 }}>
        {children}
      </main>
      
      <Footer 
        copyright="© 2024 Company"
        links={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Terms', href: '/terms' }
        ]}
      />
    </div>
  );
}

Place the Footer inside a flex container with flex: 1 on the main content to ensure it stays at the bottom of the page, even with little content.

The Footer component automatically adjusts to a mobile-friendly stacked layout on smaller screens.

Best Practices

Keep it organized: Group related links into clear sections
Limit columns: Use 3-4 columns maximum for better readability
Mobile-first: Ensure footer stacks well on mobile devices
Essential links: Include only important links; avoid clutter
Legal compliance: Always include privacy policy and terms of service links
Accessibility: Use semantic HTML and proper link text

Accessibility

Uses semantic HTML (<footer>)
Proper heading hierarchy for column titles
Keyboard navigable links
Screen reader compatible with descriptive link text
External links indicated with appropriate ARIA labels
Social media icons include text labels for accessibility

Overview

UI Components

Layout

Overview

Basic Usage

Footer Variants

Footer Structure

Multi-Column Layout

Props

Footer Props

FooterColumn Props

FooterLink Props

TypeScript Interfaces

Complete Examples

Full Footer

Minimal Footer

Layout Integration

Best Practices

Accessibility

​Overview

​Basic Usage

​Footer Variants

​Footer Structure

​Multi-Column Layout

​Props

​Footer Props

​FooterColumn Props

​FooterLink Props

​TypeScript Interfaces

​Complete Examples

​Full Footer

​Minimal Footer

​App Footer with Newsletter

​Layout Integration

​Best Practices

​Accessibility

Overview

Basic Usage

Footer Variants

Footer Structure

Multi-Column Layout

Props

Footer Props

FooterColumn Props

FooterLink Props

TypeScript Interfaces

Complete Examples

Full Footer

Minimal Footer

App Footer with Newsletter

Layout Integration

Best Practices

Accessibility