Footer

The Footer component allows for customizable footers with optional social links, navigation links and logo.

Usage & Examples

Default Footer

default-footer.tsx
<Footer
  copyright="© 2025 Your Company"
  links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
  socialLinks={[{ icon: FaGithub, href: "https://github.com", title: "GitHub" }, { icon: FaTwitter, href: "https://twitter.com", title: "Twitter" }, { icon: FaLinkedin, href: "https://linkedin.com", title: "LinkedIn" }]}
/>

Props API

51 props
Columns
Footer props API
Default
Description
actionGroupClassNamestringNoprops—Optional custom class name for action groups, such as the Connect group.
actionsClassNamestringNoprops—Optional custom class name for the actions column.
aria-describedbystringNoaria—Describes the footer landmark via external element IDs.
aria-labelstringNoaria—Accessible label for the overall footer landmark. Use when multiple contentinfo landmarks may appear on the page.
aria-labelledbystringNoaria—Accessible label reference for the overall footer landmark.
attachmentAttachmentTypeNoprops"static"Attachment type for how the footer is positioned. ('static' | 'fixed' | 'sticky')
bottomClassNamestringNoprops—Optional custom class name for the bottom bar.
bottomCopyrightClassNamestringNoprops—Optional custom class name for the bottom copyright text.
bottomEndReactNodeNoprops—Content shown on the right side of the bottom bar. Example: "Secure Environment"
bottomEndClassNamestringNoprops—Optional custom class name for the bottom-end content.
brandClassNamestringNoprops—Optional custom class name for the columns layout brand area.
brandDescriptionReactNodeNoprops—Optional brand description text displayed in the brand column.