Light Dark System

Footer

<cw-footer> | CwFooter
Since 1.3 experimental

Site footer region composing branding, a flat link list, arbitrary “about” content, and a bottom bar with copyright and social links.

<cw-footer> composes everything a site’s footer typically needs, via named slots: logo, menu (a flat list of plain links — not a repeating item component, no grouping or headings), about (arbitrary full-width content), and social (any number of <cw-social-link> elements). Any slot you don’t populate renders nothing. The owner property adds a copyright line automatically.

Installation Community Frameworks Accessibility Roadmap Changelog
Cordwainer Elements is a themeable, accessible web component library.
 
<cw-footer owner="Cordwainer">
  <cw-logo
    slot="logo"
    image="/assets/images/Cordwainer-logo-light-mode-vector.svg"
    dark-image="/assets/images/Cordwainer-logo-dark-mode-vector.svg"
    href="/"
    label="Cordwainer home"
  ></cw-logo>

  <a slot="menu" href="/getting-started/installation">Installation</a>
  <a slot="menu" href="/resources/community">Community</a>
  <a slot="menu" href="/frameworks/react">Frameworks</a>
  <a slot="menu" href="/resources/accessibility">Accessibility</a>
  <a slot="menu" href="/resources/roadmap">Roadmap</a>
  <a slot="menu" href="/resources/changelog">Changelog</a>

  <div slot="about">Cordwainer Elements is a themeable, accessible web component library.</div>

  <cw-social-link slot="social" href="https://github.com" platform="github"></cw-social-link>
  <cw-social-link slot="social" href="https://x.com" platform="twitter"></cw-social-link>
  <cw-social-link slot="social" href="https://mastodon.social" platform="mastodon"></cw-social-link>
</cw-footer>

import { CwFooter, CwLogo, CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwFooter owner="Cordwainer">
    <CwLogo
      slot="logo"
      image="/assets/images/Cordwainer-logo-light-mode-vector.svg"
      darkImage="/assets/images/Cordwainer-logo-dark-mode-vector.svg"
      href="/"
      label="Cordwainer home"
    />

    <a slot="menu" href="/getting-started/installation">
      Installation
    </a>
    <a slot="menu" href="/resources/community">
      Community
    </a>
    <a slot="menu" href="/frameworks/react">
      Frameworks
    </a>
    <a slot="menu" href="/resources/accessibility">
      Accessibility
    </a>
    <a slot="menu" href="/resources/roadmap">
      Roadmap
    </a>
    <a slot="menu" href="/resources/changelog">
      Changelog
    </a>

    <div slot="about">Cordwainer Elements is a themeable, accessible web component library.</div>

    <CwSocialLink slot="social" href="https://github.com" platform="github" />
    <CwSocialLink slot="social" href="https://x.com" platform="twitter" />
    <CwSocialLink slot="social" href="https://mastodon.social" platform="mastodon" />
  </CwFooter>
);

Examples

The menu slot is a flat list of plain <a> elements — no grouping, no headings, no repeating item component. It reflows into columns automatically: 3 wide, collapsing to 1 on narrow containers.

Link one Link two Link three Link four Link five Link six 
<cw-footer class="footer-demo-narrow">
  <a slot="menu" href="/one">Link one</a>
  <a slot="menu" href="/two">Link two</a>
  <a slot="menu" href="/three">Link three</a>
  <a slot="menu" href="/four">Link four</a>
  <a slot="menu" href="/five">Link five</a>
  <a slot="menu" href="/six">Link six</a>
</cw-footer>

<style>
  .footer-demo-narrow {
    max-width: 400px;
  }
</style>

import { CwFooter } from '@cordwainer/cw-elements/dist/react';

const css = `
  .footer-demo-narrow {
    max-width: 400px;
  }
`;

const App = () => (
  <>
    <CwFooter className="footer-demo-narrow">
      <a slot="menu" href="/one">
        Link one
      </a>
      <a slot="menu" href="/two">
        Link two
      </a>
      <a slot="menu" href="/three">
        Link three
      </a>
      <a slot="menu" href="/four">
        Link four
      </a>
      <a slot="menu" href="/five">
        Link five
      </a>
      <a slot="menu" href="/six">
        Link six
      </a>
    </CwFooter>

    <style>{css}</style>
  </>
);

Set owner and the footer renders © plus the current year automatically — no need to keep a year up to date by hand. Leave it unset and no copyright line renders at all. 

<cw-footer owner="Acme Inc."></cw-footer>

import { CwFooter } from '@cordwainer/cw-elements/dist/react';

const App = () => <CwFooter owner="Acme Inc." />;

The bottom bar renders whenever there’s a copyright line, social links, or both — so a footer with only social links (no owner set) still shows them. 

<cw-footer>
  <cw-social-link slot="social" href="https://github.com" platform="github"></cw-social-link>
  <cw-social-link slot="social" href="https://linkedin.com" platform="linkedin"></cw-social-link>
</cw-footer>

import { CwFooter, CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwFooter>
    <CwSocialLink slot="social" href="https://github.com" platform="github" />
    <CwSocialLink slot="social" href="https://linkedin.com" platform="linkedin" />
  </CwFooter>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/footer/footer.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/footer/footer.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/footer/footer.js';

To import this component as a React component:

import CwFooter from '@cordwainer/cw-elements/dist/react/footer';

Slots

Name Description
logo A <cw-logo>.
menu Plain <a> links. Not a repeating item component — a flat list that reflows into columns (3 wide, 1 narrow) via CSS, no grouping or headings.
about Arbitrary content, rendered full width.
social Any number of <cw-social-link> elements.

Learn more about using slots.

Properties

Name Description Reflects Type Default
owner The copyright owner’s name. When set, the footer renders © {currentYear} {owner}. Renders nothing if unset. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper, a <footer> landmark element.
logo The container that wraps the slotted logo.
menu The container that wraps the slotted menu links.
about The container that wraps the slotted about content.
bottom The bottom bar that wraps the copyright text and social links.
copyright The copyright text.
social The container that wraps the slotted social links.

Learn more about customizing CSS parts.