SiteFooter

A site-wide footer with content, legal and social slots, plus a built-in home for consent settings.

SiteFooter

View source · API reference

The explicit teleport target keeps this footer inside the example.

<div id="footer-example-target"></div>
<SiteFooter
  teleport="#footer-example-target"
  copyright="© Example Studio"
  legalLabel="Example documentation links"
>
  <Grid columns="1" columnsSm="2">
    <div>
      <h3>Example Studio</h3>
      <p>A footer composed from the same components as the page.</p>
    </div>
    <Flex direction="column" align="start">
      <BtnLink href="/components/" variant="link">Component library</BtnLink>
      <BtnLink href="/components/site/site-logo/" variant="link">Brand presentation</BtnLink>
    </Flex>
  </Grid>
  <template #legal>
    <BtnLink href="/components/site/consent/" variant="link">Privacy controls guide</BtnLink>
  </template>
  <template #social>
    <BtnLink href="/components/" variant="link">Explore</BtnLink>
  </template>
</SiteFooter>

Behavior and accessibility

The default teleport destination is body, so ordinary usage moves the footer out of the local content tree. Supply a target selector for inline placement. Its bottom row adapts from stacked content to a horizontal layout.

API reference

SiteFooter contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

Composition

Default slot: main footer content. legal: legal or policy links. social: additional links. The legal row includes the consent-settings teleport target. Register defineFooterComponents and defineFlexComponents.