Multi Column

A footer split into grouped link columns for products, company, and resources. Organizes deep site navigation on a large marketing or app homepage.

import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { ArrowRightIcon } from 'lucide-react';
import { FacebookIcon } from '@/components/ui/brand-icons';
import { TwitterIcon, InstagramIcon, LinkedinIcon, GithubIcon } from '@/components/ui/brand-icons';

const footerLinks = [
  {
    title: 'Product',
    links: [
      { title: 'Features', href: '/features' },
      { title: 'Pricing', href: '/pricing' },
      { title: 'Integrations', href: '/integrations' },
      { title: 'Changelog', href: '/changelog' },
      { title: 'Documentation', href: '/docs' },
    ],
  },
  {
    title: 'Company',
    links: [
      { title: 'About us', href: '/about' },
      { title: 'Blog', href: '/blog' },
      { title: 'Careers', href: '/careers' },
      { title: 'Customers', href: '/customers' },
      { title: 'Brand', href: '/brand' },
    ],
  },
  {
    title: 'Resources',
    links: [
      { title: 'Community', href: '/community' },
      { title: 'Contact', href: '/contact' },
      { title: 'Support', href: '/support' },
      { title: 'FAQ', href: '/faq' },
      { title: 'Terms of service', href: '/terms' },
    ],
  },
  {
    title: 'Developers',
    links: [
      { title: 'API', href: '/api' },
      { title: 'Status', href: '/status' },
      { title: 'GitHub', href: 'https://github.com', external: true },
      { title: 'Team', href: '/team' },
      { title: 'Developer Blog', href: '/blog/dev' },
    ],
  },
];

const socialLinks = [
  { icon: FacebookIcon, href: 'https://facebook.com', label: 'Facebook' },
  { icon: TwitterIcon, href: 'https://twitter.com', label: 'Twitter' },
  { icon: InstagramIcon, href: 'https://instagram.com', label: 'Instagram' },
  { icon: LinkedinIcon, href: 'https://linkedin.com', label: 'LinkedIn' },
  { icon: GithubIcon, href: 'https://github.com', label: 'GitHub' },
];

export default function FooterMultiColumn() {
  return (
    <footer className="bg-background w-full border-t">
      <div className="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-20 2xl:max-w-[1400px]">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5">
          <div className="lg:col-span-2">
            <a href="/" className="flex items-center space-x-2">
              <span className="text-xl font-bold">Your Company</span>
            </a>
            <p className="text-muted-foreground mt-4 max-w-xs text-sm">
              Making the world a better place through constructing elegant
              hierarchies.
            </p>
            <div className="mt-6">
              <p className="text-sm font-medium">Subscribe to our newsletter</p>
              <div className="mt-2 flex gap-2">
                <Input
                  type="email"
                  placeholder="Enter your email"
                  className="max-w-[240px]"
                />
                <Button type="submit" size="icon">
                  <ArrowRightIcon className="h-4 w-4" />
                  <span className="sr-only">Subscribe</span>
                </Button>
              </div>
              <p className="text-muted-foreground mt-2 text-xs">
                Get the latest news and updates from our team.
              </p>
            </div>
          </div>

          {footerLinks.map((group) => (
            <div key={group.title}>
              <h3 className="font-medium">{group.title}</h3>
              <ul className="mt-4 space-y-2">
                {group.links.map((link) => (
                  <li key={link.title}>
                    {link.external ? (
                      <a
                        href={link.href}
                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                        target="_blank"
                        rel="noreferrer"
                      >
                        {link.title}
                      </a>
                    ) : (
                      <a
                        href={link.href}
                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                      >
                        {link.title}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-6 border-t pt-8 md:flex-row">
          <div className="flex gap-4">
            {socialLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="text-muted-foreground hover:text-foreground transition-colors"
                aria-label={link.label}
                target="_blank"
                rel="noreferrer"
              >
                <link.icon className="h-5 w-5" />
              </a>
            ))}
          </div>
          <p className="text-muted-foreground text-center text-sm md:text-left">
            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
          </p>
          <div className="flex gap-4">
            <a
              href="/privacy"
              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
            >
              Privacy Policy
            </a>
            <a
              href="/terms"
              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
            >
              Terms of Service
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

About this block

Multi Column Footer opens with a two-column-wide brand panel on the left: a company name link, a one-sentence tagline, and an inline email newsletter form with an input and a submit button. To the right, four labelled link columns sit side by side: Product, Company, Resources, and Developers, each with five items. A ruled bottom bar closes the layout with a row of five social icons on the left, a copyright notice in the center, and Privacy Policy and Terms of Service links on the right.

All four link groups and the brand panel are independent, so you can rename columns, swap links in or out, trim a column entirely, or replace the tagline without touching the surrounding structure. The newsletter form and the social icons are similarly self-contained pieces you can remove if your site handles those elsewhere.

When to use

Reach for this block when your product analytics platform has grown enough that visitors need a reliable way to find documentation, the API reference, the status page, and the blog from any page on the site. The four-column grid fits a tool with distinct product, developer, and company audiences who each need their own cluster of links. The built-in newsletter capture is useful when you want signups at the bottom of long feature or pricing pages without adding a separate section.

A natural flow around it on a Marketing (Legacy) page:

Before

A CTA section to close the main content with a conversion prompt before the page ends
A pricing section if the page is anchored around a plan comparison

After

Nothing sits below a footer; this block ends the page

What you can customize

Replace the demo copy and links with whatever your site actually has at each destination:

Link columns. Each column is a titled group with its own list, so you can rename headings, reorder items, or drop a column down to three if Developers does not apply to your product.
Newsletter form. The email input and submit button are a contained unit you can remove outright or wire to your email provider without changing anything else in the block.
Bottom bar. The social icons, copyright string, and legal links are all separate, so you can add or remove social platforms or swap the legal links to match your actual policy pages.

Tip: keep each link column to five items or fewer so the columns stay balanced and the footer does not overwhelm the page it closes.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A CTA section to close the main content with a conversion prompt before the page ends
A pricing section if the page is anchored around a plan comparison

After

Nothing sits below a footer; this block ends the page

What you can customize

Replace the demo copy and links with whatever your site actually has at each destination:

Link columns. Each column is a titled group with its own list, so you can rename headings, reorder items, or drop a column down to three if Developers does not apply to your product.
Newsletter form. The email input and submit button are a contained unit you can remove outright or wire to your email provider without changing anything else in the block.
Bottom bar. The social icons, copyright string, and legal links are all separate, so you can add or remove social platforms or swap the legal links to match your actual policy pages.

Tip: keep each link column to five items or fewer so the columns stay balanced and the footer does not overwhelm the page it closes.

Multi Column

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize