Site Footer v0.1.2 · @behivetech

Site footer with a brand, grouped navigation links, free content and a legal line; the groups stack on small screens and sit in columns from the medium breakpoint.

Usage

1import { SiteFooter } from "@behivetech/organisms.site-footer";
2
3<SiteFooter
4  brand="The BeHive"
5  legal="© 2026 The BeHive"
6  groups={[
7    { title: "Art", links: [{ label: "The artists", href: "/artists" }] },
8  ]}
9/>;

The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.

Examples

Open all 2 →

Basic Site Footer

1const BasicSiteFooter = () => (
2  <SiteFooter
3    brand="The BeHive"
4    legal="© 2026 The BeHive"
5    groups={[
6      {
7        title: "Your stay",
8        links: [
9          { label: "House guide", href: "#guide" },
10          { label: "Wifi", href: "#wifi" },
11        ],
12      },
13      { title: "Art", links: [{ label: "The artists", href: "#artists" }] },
14    ]}
15  >
16    <a href="mailto:hello@example.com">hello@example.com</a>
17  </SiteFooter>
18);
19
20render(<BasicSiteFooter />);

Brand Only Site Footer

1const BrandOnlySiteFooter = () => (
2  <SiteFooter brand="The BeHive" legal="© 2026 The BeHive" />
3);
4
5render(<BrandOnlySiteFooter />);

Properties

`SiteFooter` props

Prop	Type	Default	Description
`brand`	`ReactNode`	—	Brand mark, such as a wordmark or logo, shown in the lead column
`children`	`ReactNode`	—	Free content rendered under the brand, such as contact details
`className`	`string`	—	Additional class names to merge with the component root element
`groups`	`SiteFooterGroup[]`	`[]`	Link groups. Groups without links, and an empty list, render no heading
`legal`	`ReactNode`	—	Legal line shown in its own row under the groups, such as a copyright
`linkComponent`	`ElementType<SiteFooterLinkProps>`	`a`	Component that renders each link, so a router link such as Next's `Link` can be injected. Receives `href`, `children` and NavItem's props (merged through `asChild`); pass them all through to the anchor, or the link loses NavItem's styling and hit area. Defaults to `a`.

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Usage

Examples

Properties

SiteFooter props

`SiteFooter` props