K KRDS · 01

Site header

사이트 머리

White bar with a thin grey line underneath; the current topic gets darker text and a thick underline. It looks like the header on a government portal.

RuleThe menu opens and closes without scripts, and the topic you are on is announced as the current page to screen readers too.

Also known as: SiteHeader
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteHeader } from '../components/registry';
---
<SiteHeader site={site} nav={nav} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteHeader": "bar" }
}
props (TypeScript)
export interface SiteHeaderProps {
  site: SiteConfig;
  /** 주제(카테고리) + 소개. 허브는 소개만 */
  nav: NavLink[];
  variant?: VariantOf<'SiteHeader'>;
}

All three variants are a white bar with a single line below — no shadow, no colour band. A blue rounded-square mark sits beside a bold site name. bar puts the topic menu on the right of one row; stacked puts the name and a one-line tagline on top and the topic tabs on a second row under the line; compact leaves only a bordered "Full menu" button on the right.

Pick bar for few topics, stacked to keep tabs always visible, and compact when there are many topics and each deserves a description. With almost no decoration it reads calm and trustworthy, but it can feel plain for a site that wants personality.

The layout follows KRDS, but the government emblem and the "official government site" strip are left out so the site is not mistaken for one.

Use it when — Variants 3

  1. barSingle bar When 3–5 topics fit on one line next to the name. On phones the menu folds open.Used by 3: babyplay, babysick, feeding
  2. stackedTwo rows When topic tabs should always be visible — on phones they scroll sideways instead of folding.Used by 4: babyfood, toddlerfood, vaccination, 허브
  3. compactFull menu When there are many topics, or each topic deserves a one-line description and post count.Used by 4: babysleep, birthprep, milestone, newborn
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.