Skip to main content
The Footer component provides a feature-rich site footer with logo, company description, social media links, multiple navigation columns, and decorative SVG elements. It includes automatic dark mode support and responsive layout.

​
Features

  • Multi-column responsive layout
  • Social media icon links
  • Logo with dark/light mode variants
  • Multiple navigation sections
  • Decorative SVG backgrounds
  • Copyright/credit section
  • Full dark mode support
  • Hover effects on links

​
Basic Usage

import Footer from "@/components/Footer";

export default function Layout({ children }) {
  return (
    <>
      <main>{children}</main>
      <Footer />
    </>
  );
}
The footer is organized into several sections:
  1. Brand Section: Logo, description, and social media icons
  2. Useful Links: Quick links to important pages
  3. Terms: Legal and policy links
  4. Support: Help and contact links
  5. Copyright: Bottom bar with credits

​
Customization

​
Updating Company Description

Edit the description text in the brand section:
src/components/Footer/index.tsx
<p className="mb-9 text-base leading-relaxed text-body-color dark:text-body-color-dark">
  Your company description goes here. Explain what you do and your value proposition.
</p>
The footer includes icons for Facebook, Twitter (X), YouTube, and LinkedIn: 
<a
  href="https://www.facebook.com/yourpage"
  aria-label="social-link"
  target="_blank"
  rel="noopener noreferrer"
  className="mr-6 text-body-color duration-300 hover:text-primary dark:text-body-color-dark dark:hover:text-primary"
>
  {/* Facebook SVG */}
</a>
Update the href attributes with your own social media profiles:
1

Facebook

Update line 34: href="https://www.facebook.com/yourpage"
2

Twitter/X

Update line 54: href="https://twitter.com/yourhandle"
3

YouTube

Update line 76: href="https://www.youtube.com/@yourchannel"
4

LinkedIn

Update line 92: href="https://www.linkedin.com/company/yourcompany"

​
Adding More Social Icons

To add Instagram: 
<a
  href="https://instagram.com/yourhandle"
  aria-label="social-link"
  target="_blank"
  rel="noopener noreferrer"
  className="mr-6 text-body-color duration-300 hover:text-primary dark:text-body-color-dark dark:hover:text-primary"
>
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
  </svg>
</a>

<div className="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12">
  <div className="mb-12 lg:mb-16">
    <h2 className="mb-10 text-xl font-bold text-black dark:text-white">
      Useful Links
    </h2>
    <ul>
      <li>
        <Link
          href="/blog"
          className="mb-4 inline-block text-base text-body-color duration-300 hover:text-primary dark:text-body-color-dark dark:hover:text-primary"
        >
          Blog
        </Link>
      </li>
      {/* More links */}
    </ul>
  </div>
</div>
Add, remove, or modify links in each column: 
<ul>
  <li>
    <Link
      href="/your-page"
      className="mb-4 inline-block text-base text-body-color duration-300 hover:text-primary dark:text-body-color-dark dark:hover:text-primary"
    >
      Your Link Text
    </Link>
  </li>
</ul>

​
Column Widths

The footer uses responsive column widths: 
// Brand section (wider)
<div className="w-full px-4 md:w-1/2 lg:w-4/12 xl:w-5/12">

// Navigation columns
<div className="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12">

// Support section
<div className="w-full px-4 md:w-1/2 lg:w-4/12 xl:w-3/12">
Update the copyright/credit text:
src/components/Footer/index.tsx
<div className="py-8">
  <p className="text-center text-base text-body-color dark:text-white">
    © 2024 Your Company. All rights reserved. Built with{" "}
    <a
      href="https://nextjs.org"
      target="_blank"
      rel="noopener noreferrer"
      className="hover:text-primary"
    >
      Next.js
    </a>
  </p>
</div>

​
Decorative Elements

The footer includes two SVG decorative elements:

​
Top Right Circle

<div className="absolute right-0 top-14 z-[-1]">
  <svg width="55" height="99" viewBox="0 0 55 99" fill="none">
    {/* Circle SVG */}
  </svg>
</div>

​
Bottom Left Shapes

<div className="absolute bottom-24 left-0 z-[-1]">
  <svg width="79" height="94" viewBox="0 0 79 94" fill="none">
    {/* Geometric shapes SVG */}
  </svg>
</div>
To remove decorative elements, delete these <div> blocks.

​
Responsive Layout

  • Single column layout
  • Full width sections
  • Stacked navigation columns
  • Social icons in a row

​
Styling

​
Background and Spacing

<footer className="relative z-10 bg-white pt-16 dark:bg-gray-dark md:pt-20 lg:pt-24">
  • Light mode: bg-white
  • Dark mode: dark:bg-gray-dark
  • Top padding: pt-16 to lg:pt-24

​
Divider Line

A gradient divider separates content from copyright: 
<div className="h-px w-full bg-gradient-to-r from-transparent via-[#D2D8E183] to-transparent dark:via-[#959CB183]"></div>
All links include smooth hover transitions: 
className="text-body-color duration-300 hover:text-primary dark:text-body-color-dark dark:hover:text-primary"

​
Advanced Customization

​
Adding a Newsletter Signup

Add a newsletter form to the footer: 
<div className="w-full px-4 md:w-1/2 lg:w-4/12">
  <div className="mb-12 lg:mb-16">
    <h2 className="mb-10 text-xl font-bold text-black dark:text-white">
      Newsletter
    </h2>
    <p className="mb-4 text-base text-body-color dark:text-body-color-dark">
      Subscribe to get updates
    </p>
    <form className="flex gap-2">
      <input
        type="email"
        placeholder="Your email"
        className="w-full rounded-sm border border-stroke px-4 py-3 text-base text-body-color outline-none focus:border-primary dark:border-transparent dark:bg-[#2C303B] dark:text-body-color-dark dark:shadow-two dark:focus:border-primary dark:focus:shadow-none"
      />
      <button
        type="submit"
        className="rounded-sm bg-primary px-6 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-opacity-90"
      >
        Subscribe
      </button>
    </form>
  </div>
</div>

​
Custom Column Layout

Create a 4-column layout instead: 
{/* Brand - 3 columns */}
<div className="w-full px-4 lg:w-3/12">

{/* Three navigation columns - 3 columns each */}
<div className="w-full px-4 lg:w-3/12">

​
Accessibility

  • Social links include aria-label="social-link"
  • External links use rel="noopener noreferrer"
  • Semantic footer element
  • Proper heading hierarchy (h2 for section titles)
  • Keyboard navigable links
  • Sufficient color contrast in both modes

​
SEO Considerations

  • Use descriptive link text
  • Include company description with relevant keywords
  • Link to important pages from footer
  • Add structured data for organization (optional enhancement)

Header

Main navigation header with menu

Contact

Contact form for user inquiries

Build docs developers (and LLMs) love

Get started for freeTalk to us