Skip to main content
USWDS + Tailwind

Footer

Help visitors find useful links at the bottom of a page with footer layouts in default, big, and slim styles.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
footer-demo.tsx
import { Footer, Link } from '@uswds-tailwind/react'


export default function FooterDemo() {
  return (
    <Footer.Root>
      <Footer.ReturnToTop>
        <Link href="#main-content">Return to top</Link>
      </Footer.ReturnToTop>
      <Footer.Primary>
        <Footer.PrimaryInner>
          <Footer.PrimaryList>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">About us</Footer.PrimaryLink></Footer.PrimaryItem>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">Resources</Footer.PrimaryLink></Footer.PrimaryItem>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">Contact us</Footer.PrimaryLink></Footer.PrimaryItem>
          </Footer.PrimaryList>
        </Footer.PrimaryInner>
      </Footer.Primary>
      <Footer.Secondary>
        <Footer.SecondaryInner>
          <Footer.Logo>
            <div aria-hidden="true" className="bg-white size-20 rounded-full" />
            <Footer.LogoHeading>Name of agency</Footer.LogoHeading>
          </Footer.Logo>
          <Footer.Contact>
            <Footer.SocialLinks>
              <Footer.SocialLink href="#"><span className="icon-[fa6-brands--facebook] size-full" /><span className="sr-only">Facebook</span></Footer.SocialLink>
              <Footer.SocialLink href="#"><span className="icon-[fa6-brands--youtube] size-full" /><span className="sr-only">YouTube</span></Footer.SocialLink>
            </Footer.SocialLinks>
            <Footer.ContactHeading>Agency Contact Center</Footer.ContactHeading>
            <Footer.Address>
              <Footer.ContactInfo><Footer.ContactLink href="tel:1-800-555-5555">(800) 555-GOVT</Footer.ContactLink></Footer.ContactInfo>
              <Footer.ContactInfo><Footer.ContactLink href="mailto:info@agency.gov">info@agency.gov</Footer.ContactLink></Footer.ContactInfo>
            </Footer.Address>
          </Footer.Contact>
        </Footer.SecondaryInner>
      </Footer.Secondary>
    </Footer.Root>
  )
}

Big

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
footer-medium-demo.tsx
import { Button, Footer, Input, Link } from '@uswds-tailwind/react'


export default function FooterMediumDemo() {
  return (
    <Footer.Root variant="big">
      <Footer.ReturnToTop>
        <Link href="#main-content">Return to top</Link>
      </Footer.ReturnToTop>
      <Footer.Primary>
        <Footer.PrimaryInner>
          <Footer.Nav>
            <Footer.Section>
              <Footer.SectionHeading><h4>About</h4></Footer.SectionHeading>
              <Footer.SectionList>
                <Footer.SectionItem><Footer.SectionLink href="#">Our agency</Footer.SectionLink></Footer.SectionItem>
                <Footer.SectionItem><Footer.SectionLink href="#">Leadership</Footer.SectionLink></Footer.SectionItem>
              </Footer.SectionList>
            </Footer.Section>
            <Footer.Section>
              <Footer.SectionHeading><h4>Resources</h4></Footer.SectionHeading>
              <Footer.SectionList>
                <Footer.SectionItem><Footer.SectionLink href="#">Services</Footer.SectionLink></Footer.SectionItem>
                <Footer.SectionItem><Footer.SectionLink href="#">Publications</Footer.SectionLink></Footer.SectionItem>
              </Footer.SectionList>
            </Footer.Section>
          </Footer.Nav>
          <div className="border-t @tablet:border-t-0 border-t-gray-cool-30 pt-8 px-4 @tablet:p-0">
            <h3 className="text-xl font-bold font-merriweather">Sign Up</h3>
            <label htmlFor="footer-email" className="block mt-3">Your email address</label>
            <Input id="footer-email" type="email" />
            <Button className="mt-2 @mobile-lg:mt-6">Sign Up</Button>
          </div>
        </Footer.PrimaryInner>
      </Footer.Primary>
      <Footer.Secondary>
        <Footer.SecondaryInner>
          <Footer.Logo>
            <div aria-hidden="true" className="bg-white size-20 rounded-full" />
            <Footer.LogoHeading>Name of agency</Footer.LogoHeading>
          </Footer.Logo>
          <Footer.Contact>
            <Footer.ContactHeading>Agency Contact Center</Footer.ContactHeading>
            <Footer.Address>
              <Footer.ContactInfo><Footer.ContactLink href="tel:1-800-555-5555">(800) 555-GOVT</Footer.ContactLink></Footer.ContactInfo>
              <Footer.ContactInfo><Footer.ContactLink href="mailto:info@agency.gov">info@agency.gov</Footer.ContactLink></Footer.ContactInfo>
            </Footer.Address>
          </Footer.Contact>
        </Footer.SecondaryInner>
      </Footer.Secondary>
    </Footer.Root>
  )
}

Slim

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
footer-slim-demo.tsx
import { Footer, Link } from '@uswds-tailwind/react'


export default function FooterSlimDemo() {
  return (
    <Footer.Root variant="slim">
      <Footer.ReturnToTop>
        <Link href="#main-content">Return to top</Link>
      </Footer.ReturnToTop>
      <Footer.Primary>
        <Footer.PrimaryInner>
          <Footer.PrimaryList>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">About us</Footer.PrimaryLink></Footer.PrimaryItem>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">Resources</Footer.PrimaryLink></Footer.PrimaryItem>
            <Footer.PrimaryItem><Footer.PrimaryLink href="#">Contact us</Footer.PrimaryLink></Footer.PrimaryItem>
          </Footer.PrimaryList>
          <Footer.Address>
            <Footer.ContactInfo><Footer.ContactLink href="tel:1-800-555-5555">(800) 555-GOVT</Footer.ContactLink></Footer.ContactInfo>
            <Footer.ContactInfo><Footer.ContactLink href="mailto:info@agency.gov">info@agency.gov</Footer.ContactLink></Footer.ContactInfo>
          </Footer.Address>
        </Footer.PrimaryInner>
      </Footer.Primary>
      <Footer.Secondary>
        <Footer.SecondaryInner>
          <div aria-hidden="true" className="bg-white size-12 rounded-full" />
          <Footer.ContactHeading>Agency Contact Center</Footer.ContactHeading>
        </Footer.SecondaryInner>
      </Footer.Secondary>
    </Footer.Root>
  )
}

Component API

Compose a footer from primary navigation, identity, contact, and optional section parts.

Root<footer>

Provides the layout variant.

PropTypeDefaultDescription
variantdefault | slim | bigdefaultSelects the footer layout.

ReturnToTop<div>

Holds a return-to-top link.

Primary<nav>

Contains primary footer navigation.

PrimaryInner<div>

Constrains primary content width.

PrimaryList<ul>

Place PrimaryItem parts here.

PrimaryItem<li>

Wrap one PrimaryLink within PrimaryList.

Uses primary footer link styling.

Secondary<div>

Contains identity and contact information.

SecondaryInner<div>

Arranges the secondary content.

Place the organization logo in the secondary identity block.

LogoHeading<div>

Displays the organization name.

Contact<div>

Groups contact details.

Groups social links.

Put the social account name or icon here.

Address<address>

Holds postal or contact information.

ContactHeading<div>

Labels the contact block.

ContactInfo<div>

Arranges contact methods.

Set href to a contact destination.

Nav<nav>

Groups footer sections.

Section<section>

Contains a footer link section.

SectionHeading<div>

Labels a link section.

SectionList<ul>

Lists section links.

SectionItem<li>

Wrap one SectionLink so the section remains a list.

Uses section link spacing and focus styles.