Footer

Site footer with brand, navigation groups, locale, and social links.

Footer is a compound layout for marketing and app footers — brand, link groups, meta row, locale, and social icons.

Contract

Overview

Machine-readable contract from Component Spec.

component: footerexport: Footerversion: 1attributes: data-refineui=footer

Anatomy

Part	data-refineui
root	footer
brand	footer-brand
brand_description	footer-brand-description
brand_name	footer-brand-name
copyright	footer-copyright
explore	footer-explore
group	footer-group
group_label	footer-group-label
link	footer-link
locale	footer-locale
logo	footer-logo
meta	footer-meta
meta_end	footer-meta-end
nav	footer-nav
social	footer-social

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npm install @refineui/react @refineui/tokens

Usage

import {
  Footer,
  FooterBrand,
  FooterNav,
  FooterGroup,
  FooterGroupLabel,
  FooterLink,
  FooterMeta,
  FooterCopyright,
} from "@refineui/react";

<Footer>
  <FooterBrand>RefineUI</FooterBrand>
  <FooterNav>
    <FooterGroup>
      <FooterGroupLabel>Product</FooterGroupLabel>
      <FooterLink href="/components/">Components</FooterLink>
    </FooterGroup>
  </FooterNav>
  <FooterMeta>
    <FooterCopyright>© Pelagornis</FooterCopyright>
  </FooterMeta>
</Footer>

Parts

FooterBrand, FooterNav, FooterGroup, FooterGroupLabel, FooterLink, FooterExplore, FooterSocial, FooterLocale, FooterMeta, FooterMetaEnd, FooterCopyright.