헤더

헤더는 사용자가 웹사이트에 접속하자마자 마주하게 되는 화면의 최상단 영역으로 디지털 정부 서비스의 브랜드 이미지를 전달하는 핵심 영역이다.

사용 지침

사용자가 어느 페이지에서든 동일한 위치에서 홈으로 이동하거나 핵심 메뉴를 탐색할 수 있도록 모든 라우트에 고정 배치하며, 접근성을 위해 건너뛰기 링크와 함께 사용합니다.

examples/header/HeaderDefault.tsx

import { LogIn, Menu, Search, User, UserPlus } from "lucide-react"
import { KrdsLogo } from "@/components/logo/krds"
import {

examples/header/HeaderLoggedIn.tsx

import { LogOut, Menu, Search, User } from "lucide-react"
import { KrdsLogo } from "@/components/logo/krds"
import {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLElement>	—	—
skipLinkHref	string	#main-content	—
skipLinkLabel	ReactNode	본문 바로가기	—
sticky	boolean	true	KRDS #krds-header is sticky + hides on scroll-down / reveals on scroll-up (_header.scss:32-33,148-180).
style	CSSProperties	—	—
tabIndex	number	—	—