Skip to content
Jaringan

Components · Jaringan block

Header

The PPI mark and wordmark, the cabinet slot, five links and the account. Sticky and solid. The current page gets a small red station dot, the only red in the header.

Header

This preview shows “Events” as the current page. Narrow your window below 64rem to get the Menu button.

Preview
PPIT Shenzhen
Show code
<SiteHeader
  brand={<OrgBrand />}
  cabinet={<CabinetSlot />}
  links={[{ href: "/events", label: "Events" }, …]}
  currentHref={usePathname()}
  account={<SignInButton />}
  menuExtras={<ThemeControl />}
  linkAs={NextLink}
/>

Mobile menu

The logo plus a “Menu” button that opens a full-screen dialog. Inside, the links are stations on a red vertical route, with the current page as “here”; the account and theme control sit below. Focus is trapped and returns to the Menu button.

Language switcher

An optional languageSwitcher slot. The apps are English-only and leave it empty (ADR 0007); it stays for a site that publishes the same pages in several languages. Each link carries lang, hrefLang and the full language name.

Preview
Show code
<SiteHeader … languageSwitcher={<LanguageSwitcher options={…} current="en" />} />

Rules

  • <nav aria-label="Main"> with a list, and a skip link “Skip to content” as the first focusable element.
  • Never transparent over the hero, never hidden on scroll, never color-changing.
  • No hover-only dropdowns. “Events” links straight to the events index.
  • Never show a disabled nav item. The account slot reserves its size while auth loads, so the header never shifts.

Don’t

A transparent header over a darkened hero photo that turns solid on scroll.

Do

A solid bg header with a hairline border, the same on every page.