Footer

InstallationCopy Anchor Link

npx vayu-ui-cli@latest add footer

UsageCopy Anchor Link

AnatomyCopy Anchor Link

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).

AccessibilityCopy Anchor Link

• 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 behaviorCopy Anchor Link

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 StructureCopy Anchor Link

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

PropsCopy Anchor Link

Footer (Root)Copy Anchor Link

Footer.ContainerCopy Anchor Link

Footer.GridCopy Anchor Link

Footer.SectionCopy Anchor Link

Footer.LinkCopy Anchor Link

Footer.LogoCopy Anchor Link

Footer.SocialCopy Anchor Link

Footer.SocialLinkCopy Anchor Link

Footer.CopyrightCopy Anchor Link

Footer.DividerCopy Anchor Link

Footer.BottomCopy Anchor Link