# FamilyFooter The foot of a family's site: the `FamilyBar`'s links, in the same order, in a quiet row that wraps, with the site being shown marked the same way, and the site's own extras (`children`) after them. The family's links are a labelled `

` of plain links, whole in the server HTML. ```tsx import { FamilyFooter } from "@/components/ouro/family-bar/family-footer"; ``` ## Example ```tsx Privacy Terms ``` ## Use instead when - Use `FamilyBar` instead for the strip above the site's header, and `Navbar` for a site's own pages. ## Props Type: `FamilyFooterProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `ReactNode` | | The site's own extras, after the family's links: its Privacy and Terms links, a line about who makes it. They fill the rest of the row, or a row of their own, and sit at its end (at its start on a phone) until you spread them: `me-auto` on the first. | | `className` | `string` | | Layout only: margins, grid placement (`mt-auto`). Appearance classes warn in development. | | `current` | `string` | | The `id` of the site being shown, marked as in the `FamilyBar`: `aria-current="true"`, the text colour and a primary underline. | | `label` | `string` | `"All sites"` | Names the footer's navigation for screen readers, apart from the bar's. It is not shown. | | `links` (required) | `readonly FamilyLink[]` | | The family's sites, in order: the list the site's `FamilyBar` takes. | | `ref` | `Ref` | | Reaches the rendered element. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `currentPath`: Not a prop. FamilyFooter marks a site by its id, not by a path: ``. - `items`: Not a prop. FamilyFooter takes `links`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. ## Types ### `FamilyLink` One site of a family, in a FamilyBar and a FamilyFooter. ```ts interface FamilyLink { /** Names the site for `current`: "docs". It is not shown. */ id: string; /** The site's name, the link's text: "Docs". */ label: string; /** Where the link goes: the site's home page, "https://docs.example.com/". */ href: string; } ```