VayuUI
Components

Footer

A responsive footer component with multiple layout variants for site-wide navigation and information sections.

Installation

npx vayu-ui init #one time only
npx vayu-ui add footer
npx vayu-ui add -t footer #with test case needs

Usage

Ready to get started?

Join thousands of developers building with Vayu UI.

© 2026 Vayu UI. All rights reserved.
Privacy PolicyTerms of Service
<Footer>
  <Footer.Container>
    <Footer.Grid>
      <Footer.Section>
        <Footer.Logo href="#">Logo</Footer.Logo>
        <p>Building modern UIs.</p>
        <Footer.Social>
          <Footer.SocialLink href="#" aria-label="Twitter">
            <Twitter size={18} />
          </Footer.SocialLink>
          <Footer.SocialLink href="#" aria-label="GitHub">
            <Github size={18} />
          </Footer.SocialLink>
        </Footer.Social>
      </Footer.Section>
      <Footer.Section title="Product">
        <Footer.Link href="#">Features</Footer.Link>
        <Footer.Link href="#">Pricing</Footer.Link>
      </Footer.Section>
      <Footer.Section title="Resources">
        <Footer.Link href="#">Documentation</Footer.Link>
        <Footer.Link href="#">API Reference</Footer.Link>
      </Footer.Section>
      <Footer.Section title="Company">
        <Footer.Link href="#">About</Footer.Link>
        <Footer.Link href="#">Contact</Footer.Link>
      </Footer.Section>
    </Footer.Grid>
    <Divider />
    <Footer.Bottom>
      <Footer.Copyright>&copy; 2026 Company. All rights reserved.</Footer.Copyright>
      <Footer.Link href="#">Privacy Policy</Footer.Link>
      <Footer.Link href="#">Terms of Service</Footer.Link>
    </Footer.Bottom>
  </Footer.Container>
</Footer>

<Footer variant="centered">
  <Footer.Container>
    <Footer.Grid>
      <Footer.Section>
        <Footer.Logo href="#">Logo</Footer.Logo>
        <nav className="flex flex-wrap justify-center gap-6 mt-4">
          <Footer.Link href="#">Home</Footer.Link>
          <Footer.Link href="#">About</Footer.Link>
          <Footer.Link href="#">Services</Footer.Link>
          <Footer.Link href="#">Contact</Footer.Link>
        </nav>
        <Footer.Social className="mt-4">
          <Footer.SocialLink href="#" aria-label="Twitter">
            <Twitter size={18} />
          </Footer.SocialLink>
          <Footer.SocialLink href="#" aria-label="GitHub">
            <Github size={18} />
          </Footer.SocialLink>
        </Footer.Social>
      </Footer.Section>
    </Footer.Grid>
    <Divider />
    <Footer.Bottom>
      <Footer.Copyright>&copy; 2026 Company. All rights reserved.</Footer.Copyright>
    </Footer.Bottom>
  </Footer.Container>
</Footer>

<Footer variant="minimal">
  <Footer.Container>
    <Footer.Bottom>
      <Footer.Logo href="#">Logo</Footer.Logo>
      <Footer.Copyright>&copy; 2026 Company. Inc.</Footer.Copyright>
      <Footer.Social>
        <Footer.SocialLink href="#" aria-label="GitHub">
          <Github size={16} />
        </Footer.SocialLink>
        <Footer.SocialLink href="#" aria-label="Twitter">
          <Twitter size={16} />
        </Footer.SocialLink>
      </Footer.Social>
    </Footer.Bottom>
  </Footer.Container>
</Footer>

Anatomy

import { Footer } from 'vayu-ui';

<Footer variant="default">
  <Footer.Container>
    <Footer.Grid>
      <Footer.Section title="Section">
        <Footer.Logo href="/">Logo</Footer.Logo>
        <Footer.Social>
          <Footer.SocialLink href="#" aria-label="Social">
            {/* Icon */}
          </Footer.SocialLink>
        </Footer.Social>
        <Footer.Link href="#">Link</Footer.Link>
        <Footer.Link href="#" external>
          External
        </Footer.Link>
      </Footer.Section>
    </Footer.Grid>
    <Divider />
    <Footer.Bottom>
      <Footer.Copyright>&copy; 2026</Footer.Copyright>
    </Footer.Bottom>
  </Footer.Container>
</Footer>;
  • Footer — Root element. Renders a <footer> landmark with role="contentinfo". Accepts a variant prop that controls layout across all children.
  • Footer.Container — Constrained width wrapper with responsive horizontal padding.
  • Footer.Grid — Responsive grid layout. Column count adapts based on the parent variant.
  • Footer.Section — Content group with an optional title heading. Contains a <nav> with aria-label for link collections.
  • Footer.Logo — Logo wrapper. Renders an <a> link when href is provided, or a plain <div> otherwise.
  • Footer.Link — Navigation link with hover underline. Supports external to open in a new tab with an auto-generated aria-label.
  • Footer.Social — Container for social icon links. Uses role="list" to avoid nested navigation landmarks.
  • Footer.SocialLink — Circular icon link with hover background. Always opens externally. Requires aria-label for accessibility.
  • Footer.Copyright — Styled text wrapper for copyright content.
  • Footer.Divider — Horizontal separator with role="separator".
  • Footer.Bottom — Bottom bar layout. Alignment adapts to the parent variant (row for default/minimal, centered column for centered).

Accessibility

  • Keyboard Support:
    • All interactive elements are native <a> tags, fully keyboard navigable.
    • Tab — Moves focus between links and social icons in document order.
    • Enter / Space — Activates the focused link.
  • ARIA Attributes:
    • role="contentinfo" on the root <footer> landmark.
    • aria-label="{title} links" on <nav> elements inside Footer.Section.
    • aria-label auto-generated as "{text} (opens in new tab)" for external Footer.Link with string children.
    • role="list" and aria-label="Social media links" on Footer.Social.
    • role="separator" and aria-orientation="horizontal" on Footer.Divider.
    • External link icon marked aria-hidden="true".
  • Focus Behavior:
    • Visible focus ring (ring-2 ring-focus ring-offset-2 ring-offset-canvas) on all interactive elements.
    • Social links have minimum 44px touch targets (min-w-11 min-h-11).

Screen reader behavior

When a screen reader encounters the footer, it announces the "contentinfo" landmark. Each section with a title renders an <h3> heading followed by a navigation region labeled "{title} links" (e.g., "Product links"). Links within sections are listed as standard navigation items. External links are announced with "(opens in new tab)" appended to the link text. Social links are announced within a list context, so each social icon's aria-label is read as a list item. The divider is announced as a separator. The footer landmark provides a quick navigation target for assistive technology users to skip to the site footer.

Component Folder Structure

Footer/
├── Footer.tsx            # Main composition file, wires all subcomponents via Object.assign
├── FooterRoot.tsx        # Root <footer> element with variant and group styling
├── FooterLayout.tsx      # Container, Grid, and Bottom layout primitives
├── FooterContent.tsx     # Section, Link, and Logo content elements
├── FooterSocial.tsx      # Social container and SocialLink icon buttons
├── FooterUtilities.tsx   # Copyright text and Divider separator
├── types.ts              # TypeScript type definitions
├── index.ts              # Re-exports Footer component and types
└── README.md             # Component usage reference

Props

PropTypeDefaultDescription
variant"default" | "minimal" | "centered""default"Layout variant controlling grid columns and alignment.
childrenReactNode—Footer content.
classNamestring—Additional CSS classes.

Footer.Container

PropTypeDefaultDescription
childrenReactNode—Container content.
classNamestring—Additional CSS classes.

Footer.Grid

PropTypeDefaultDescription
childrenReactNode—Grid sections.
classNamestring—Additional CSS classes.

Footer.Section

PropTypeDefaultDescription
titlestring—Optional section heading. Sets aria-label on the inner <nav>.
childrenReactNode—Section content, typically Footer.Link elements.
classNamestring—Additional CSS classes.
PropTypeDefaultDescription
hrefstring—Link destination.
externalbooleanfalseOpen in a new tab with target="_blank". Auto-generates aria-label.
childrenReactNode—Link text or content.
classNamestring—Additional CSS classes.
PropTypeDefaultDescription
hrefstring"/"Logo link destination. Omit to render a non-interactive wrapper.
childrenReactNode—Logo content.
classNamestring—Additional CSS classes.

Footer.Social

PropTypeDefaultDescription
childrenReactNode—Footer.SocialLink elements.
classNamestring—Additional CSS classes.
PropTypeDefaultDescription
hrefstring—Social profile URL. Opens externally.
aria-labelstring—Accessible label for screen readers. Required for icon-only links.
childrenReactNode—Icon content.
classNamestring—Additional CSS classes.

Footer.Copyright

PropTypeDefaultDescription
childrenReactNode—Copyright text.
classNamestring—Additional CSS classes.

Footer.Divider

PropTypeDefaultDescription
classNamestring—Additional CSS classes.

Footer.Bottom

PropTypeDefaultDescription
childrenReactNode—Bottom bar content.
classNamestring—Additional CSS classes.

FloatingDock

A fixed top-center navigation dock with tooltips, logo slot, dividers, and keyboard-accessible actions.

HoverCard

A popover card revealed on hover/focus with collision-aware positioning and directional arrow.

On this page

InstallationUsageAnatomyAccessibilityScreen reader behaviorComponent Folder StructurePropsFooter (Root)Footer.ContainerFooter.GridFooter.SectionFooter.LinkFooter.LogoFooter.SocialFooter.SocialLinkFooter.CopyrightFooter.DividerFooter.Bottom