import { HeaderEnd, HeaderInner, HeaderNav, Header as HeaderPrimitive, HeaderStart, } from "@/components/registry/primitives/core/header"; import { cn } from "@/lib/registry/cn"; import { Placeholder } from "@/lib/registry/sitecore"; import type { ComponentProps } from "@/lib/registry/sitecore-types"; export type HeaderProps = ComponentProps & { params?: { [key: string]: string }; }; /** * Pure-placeholder header shell. Owns layout, responsive visibility, * and accessibility — but NO inline rendering. Authors compose every * affordance (logo, main nav, utility triggers, search, account, * language, mobile menu, etc.) by placing renderings into the slots * below. * * **Seven placeholders, three responsive tiers:** * * header-announcement-{*} always visible (top strip) * header-utility-start-{*} desktop only (left of utility row) * header-utility-end-{*} desktop only (right of utility row) * header-start-{*} always visible (logo slot) * header-nav-{*} desktop only (main nav strip) * header-end-{*} desktop only (right cluster) * header-mobile-{*} mobile only (mobile-menu renderings) * * The desktop/mobile flip happens at the `md` Tailwind breakpoint via * `hidden md:flex` / `flex md:hidden` — slot contents stay * viewport-agnostic. Each placeholder is optional; empty slots render * nothing. * * **Single variant.** Extended-style chrome (logo + mail/phone icons) * is composed via a partial design that places `image@1` (logo) + * `utility-trigger@1` (mail/phone) into the corresponding slots. */ export const Default = (props: HeaderProps) => { const params = props.params ?? {}; const { styles, RenderingIdentifier: id, DynamicPlaceholderId } = params; // Substitute SXA's per-placement digit ID into the slot names so // they match the SDK's `^-\d+$` regex derived from the // layout-service's `-{*}` template keys. See container.tsx // for the full rationale. const ph = DynamicPlaceholderId ?? "1"; return (

); }; export default Default; /** * `universal` opts this file into BOTH the server and client * component maps the SDK generates (component-map.ts + * component-map.client.ts). Without this marker the file lands in * the server map alone, so Pages chrome (browser-side) can't look * up Header or resolve its named-export variants. */ export const componentType = "universal";

Header

Showcase

Header