헤더 Header

헤더는 웹사이트의 상단 헤더 영역을 구성하는 컴포넌트이다. 유틸리티 메뉴, 브랜딩 영역, 네비게이션 메뉴를 슬롯을 통해 유연하게 구성할 수 있다. 네비게이션 슬롯에는 KrdsMainMenu 등 완성된 메뉴 컴포넌트를 그대로 전달한다.

KRDS 헤더KRDS 메인 메뉴

기본

새 창에서 보기

import { Header } from '@krds.ui/react'

export default function HeaderDemo() {
  return (
    <Header>
      <Header.Container>
        <Header.Branding />
      </Header.Container>
    </Header>
  )
}

Header

Props

이름	타입	기본값	설명
children	ReactNode	로그아웃	자식 컴포넌트들
mobileMenuTriggerPortalId	string	-	모바일 메뉴 트리거 Portal ID
desktopMenuPortalId	string	-	데스크톱 메뉴 Portal ID
mobileMenuPortalId	string	-	모바일 메뉴 Portal ID