# FamilyBar The slim strip above a site's own header that links every site of a family, the same links in the same order on each, with the site being shown marked `aria-current="true"`, in the text colour, underlined in the primary colour as Navbar marks the current page. A labelled `

` of plain links: the server HTML is the whole bar, so a page that never hydrates shows it as is. On a narrow screen the row scrolls inside itself, never the page, and fades at the side that hides more links, so a name cut at the edge reads as more to come. In browsers that support it the fade and the current site's link in view need no script. Once hydrated, the row fades in any browser and brings the current site's link into view when it is out of view. Links render through `OuroProvider`'s `linkComponent`, so a link to the site's own path stays in its router. ```tsx import { FamilyBar } from "@/components/ouro/family-bar/family-bar"; ``` ## Example ```tsx ``` ## Use instead when - Use `Navbar` instead for a site's own pages, under the FamilyBar, and `FamilyFooter` for the same links at the foot of the page. ## Props Type: `FamilyBarProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `brand` | `ReactNode` | | The family's mark or name, before the links. It stays in place while the links scroll. | | `className` | `string` | | Layout only: position (`sticky top-0`), grid placement. Appearance classes warn in development. | | `current` | `string` | | The `id` of the site being shown. Its link gets `aria-current="true"`, the text colour and a primary underline, so the mark is not colour alone. | | `label` | `string` | `"Sites"` | Names the navigation for screen readers. It is not shown. | | `links` (required) | `readonly FamilyLink[]` | | The family's sites, in order. Give every site the same list in the same order, so the bar reads the same on each. | | `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. - `children`: Not rendered. The bar is `links` and `brand`. - `currentPath`: Not a prop. FamilyBar marks a site by its id, not by a path: ``. - `items`: Not a prop. FamilyBar 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; } ```