SiteFooter

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Link } from '@nizivo/react/unstable/link';
import { SiteFooter } from '@nizivo/react/unstable/site-footer';

export function SiteFooterExample(): JSX.Element {
  return (
    <SiteFooter
      brand={<Link href="/">Nizivo</Link>}
      description="Calm, accessible product UI from one set of tokens."
      columns={[
        {
          title: 'Product',
          links: [
            { label: 'Components', href: '/docs/components/' },
            { label: 'Patterns', href: '/docs/patterns/' },
            { label: 'Changelog', href: '/changelog/' },
          ],
        },
        {
          title: 'Resources',
          links: [
            { label: 'Getting started', href: '/docs/getting-started/' },
            { label: 'Accessibility', href: '/docs/accessibility/' },
            { label: 'Tokens', href: '/docs/tokens/' },
          ],
        },
        {
          title: 'Company',
          links: [
            { label: 'About', href: '/about/' },
            { label: 'Contact', href: '/contact/' },
          ],
        },
      ]}
      legal={
        <>
          <span>Nizivo · v0.6</span>
          <span>
            <a href="/privacy/">Privacy</a> · <a href="/terms/">Terms</a>
          </span>
        </>
      }
    />
  );
}

ImportCopy Anchor Link

import { SiteFooter } from '@nizivo/react/unstable/site-footer';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/site-footer.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

UseCopy Anchor Link

It is a <footer>. brand is the logo (a link home) and description a line under it. Each of columns (a title and its links) is a <nav> named by its heading. legal holds the name, the version and the Privacy and Terms links. When narrow, the brand and the columns wrap and stack, following their container, not the window.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SiteFooterColumn type

import type { SiteFooterColumn } from '@nizivo/react/unstable/site-footer'

One column: "Product" and its links.

Name	Type	Default	Description
linksrequired	readonly SiteFooterLink[]	–
titlerequired	string	–

SiteFooterLink type

import type { SiteFooterLink } from '@nizivo/react/unstable/site-footer'

One link in a column.

Name	Type	Default	Description
hrefrequired	string	–
labelrequired	ReactNode	–

SiteFooterProps type

import type { SiteFooterProps } from '@nizivo/react/unstable/site-footer'

The props of SiteFooter, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-site-footer, .nz-site-footer-brand, .nz-site-footer-column, .nz-site-footer-description, .nz-site-footer-heading, .nz-site-footer-legal, .nz-site-footer-link, .nz-site-footer-links, .nz-site-footer-top.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.