Footer

The page footer: a frame for its rows, in the order given. Compose FooterService, FooterColumns, FooterTrust and FooterLegal, or rows of your own. Fetches nothing; every text, link and number comes in through props and slots.

import { Footer } from "@evolve-storefront/layout/footer";

Preview

DefaultOpen in Storybook ↗

Usage

A consumer store: service, columns with the newsletter, trust and legal.

<Footer>
  <FooterService>
    <FooterServiceChannel channel="chat" title={t("chat")} hours={t("chat-hours")}>
      <OpenChatButton />
    </FooterServiceChannel>
    <FooterServiceChannel channel="phone" title={t("call")} link={footer.phone} hours={t("phone-hours")} />
    <FooterServiceChannel channel="email" title={t("mail")} link={footer.email} responseTime={t("mail-response")} />
  </FooterService>
  <FooterColumns columns={footer.columns} renderLink={renderLink} aside={<NewsletterForm />} />
  <FooterTrust paymentMethods={paymentMethods} rating={footer.rating} socials={footer.socials} renderLink={renderLink} />
  <FooterLegal
    copyright={footer.copyright}
    companyNumber={footer.kvk}
    vatNumber={footer.vatNumber}
    links={footer.legalLinks}
    renderLink={renderLink}
    cookiePreferences={<CookiePreferencesButton />}
    localePicker={<CountryLanguagePicker countries={countries} locale={locale} href={pathname} />}
  />
</Footer>;

Props

Prop	Type	Description
`headingLevel?`	`HeadingLevel`	The level of the footer's own heading, which only screen readers see.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to Footer to arrange its parts yourself. Every part is exported from @evolve-storefront/layout/footer.

<Footer>
  <FooterService>
    <FooterServiceChannel channel="chat" title={t("chat")} hours={t("chat-hours")}>
      <OpenChatButton />
    </FooterServiceChannel>
    <FooterServiceChannel channel="phone" title={t("call")} link={footer.phone} hours={t("phone-hours")} />
    <FooterServiceChannel channel="email" title={t("mail")} link={footer.email} responseTime={t("mail-response")} />
  </FooterService>
  <FooterColumns columns={footer.columns} renderLink={renderLink} aside={<NewsletterForm />} />
  <FooterTrust paymentMethods={paymentMethods} rating={footer.rating} socials={footer.socials} renderLink={renderLink} />
  <FooterLegal
    copyright={footer.copyright}
    companyNumber={footer.kvk}
    vatNumber={footer.vatNumber}
    links={footer.legalLinks}
    renderLink={renderLink}
    cookiePreferences={<CookiePreferencesButton />}
    localePicker={<CountryLanguagePicker countries={countries} locale={locale} href={pathname} />}
  />
</Footer>;

FooterAccountManagerThe signed-in business buyer's own account manager, and how to reach them.

Prop	Type	Description
`name`	`string`
`avatar?`	`ReactNode`	A photo, or initials; decorative, since the name is beside it.
`phone?`	`FooterLink`
`email?`	`FooterLink`
`renderLink?`	`FooterLinkRenderer`

Any other props go to the root element, like on a plain HTML element.

FooterBusinessAccountFor a visitor without a business account: what one offers and where to request it.

Prop	Type	Description
`title`	`string`	Such as "Ordering for a business?".
`link`	`FooterLink`	Where to request a business account.
`description?`	`string`
`renderLink?`	`FooterLinkRenderer`

Any other props go to the root element, like on a plain HTML element.

FooterColumnOne link column: a heading over its links on a wide screen, a collapsed accordion section on a phone.

Prop	Type	Description
`title`	`string`
`children`	`ReactNode`	The column's links, normally a `<ul>`.
`headingLevel?`	`HeadingLevel`

Any other props go to the root element, like on a plain HTML element.

FooterColumnsThe link columns, an accordion on a phone, and the newsletter slot beside them.

Prop	Type	Description
`columns`	`FooterLinkGroup[]`
`renderLink?`	`FooterLinkRenderer`
`headingLevel?`	`HeadingLevel`	The level of each column's heading.
`aside?`	`ReactNode`	Beside the columns: the newsletter form, or a note for business buyers.

Any other props go to the root element, like on a plain HTML element.

FooterLegalThe bottom bar: copyright and registration numbers, legal links, and two slots.

Prop	Type	Description
`copyright`	`string`	Such as "© 2026 Evolve B.V.".
`companyNumber?`	`string`	The Chamber of Commerce (KvK) number, which Dutch shops must show.
`vatNumber?`	`string`
`links?`	`FooterLink[]`	Terms, privacy and the like.
`renderLink?`	`FooterLinkRenderer`
`cookiePreferences?`	`ReactNode`	The site's control that reopens the cookie preferences.
`localePicker?`	`ReactNode`	The country and language trigger, normally `CountryLanguagePicker`.

Any other props go to the root element, like on a plain HTML element.

FooterLinkAnchorOne CMS link: the site's router for a page of the site, a plain anchor for an external link, a file, an email address or a phone number.

Prop	Type	Description
`link`	`FooterLink`
`renderLink?`	`FooterLinkRenderer`	Follows a routed link; without it every link is a plain anchor.
`className?`	`string`
`children?`	`ReactNode`	Replaces the link's label, such as an icon with the label for screen readers.

FooterServiceThe service row: FooterServiceChannels, and on B2B an account card beside them.

No props of its own.

FooterServiceChannelOne way to reach customer service, with its hours and how fast it answers.

Prop	Type	Description
`channel`	`"chat" \| "phone" \| "email"`
`title`	`string`	The channel's name, such as "Chat" or "Call us".
`link?`	`FooterLink`	The number or address to use, such as `tel:` or `mailto:`.
`hours?`	`string`	When it is staffed, such as "Mon–Fri 9:00–17:30".
`responseTime?`	`string`	How fast an answer comes, such as "Within 1 working day".
`renderLink?`	`FooterLinkRenderer`

Any other props go to the root element, like on a plain HTML element.

FooterTrustThe trust row: the payment methods by name, the review score, and the socials.

Prop	Type	Description
`paymentMethods?`	`FooterPaymentMethod[]`
`rating?`	`FooterRating`
`socials?`	`FooterSocialLink[]`
`renderLink?`	`FooterLinkRenderer`

Any other props go to the root element, like on a plain HTML element.

Examples

Link TypesEach link follows the CMS: a page of the site through the router with its anchor, an external link or a file as a plain anchor, and a new tab announced as one.

// Map the CMS link onto a FooterLink: the site resolves the href, the footer the rest.
const link = { label: cms.name, href: resolveHref(cms), type: cms.type, anchor: cms.anchor, newTab: cms.newTab };
<FooterColumns columns={[{ id, title, links: [link] }]} renderLink={renderLink} />;

Open in Storybook ↗

Business BuyerA signed-in business buyer sees their own account manager in the service row.

<FooterService>
  {channels}
  <FooterAccountManager
    name={manager.name}
    avatar={manager.initials}
    phone={{ label: manager.phone, href: `tel:${manager.phone}` }}
    email={{ label: manager.email, href: `mailto:${manager.email}` }}
  />
</FooterService>;

Open in Storybook ↗

Business VisitorA business visitor without an account is offered one in the service row.

<FooterBusinessAccount
  title={t("business-title")}
  description={t("business-description")}
  link={{ label: t("business-request"), href: "/business/register" }}
  renderLink={renderLink}
/>;

Open in Storybook ↗

From SiteThe footer of the site query: siteFooterColumns makes each top-level entry of the footer menu a column of its linked children, and siteFooterTrust the payment brands, review rating and socials, named in the current locale.

const { site } = await fetcher(LayoutGetSite, { version });
const columns = siteFooterColumns(site?.footerNavigation, (link) =>
  siteLinkHref(link, ({ slug }) => productHref(slug)),
);
const t = await getTranslations("Layout.footer");
const trust = siteFooterTrust(site, { t, paymentIcons, socialIcons });

<Footer>
  <FooterColumns columns={columns} renderLink={renderLink} />
  <FooterTrust {...trust} renderLink={renderLink} />
</Footer>;

Open in Storybook ↗

Get started

Guides

Conventions

Reference

Architecture

Changelog

Footer

Preview

Usage

Props

Change the layout

Examples