KRDS Vue

헤더 Header ​

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

KRDS 가이드

기본 ​

utility, branding 슬롯에는 KRDS 헤더 마크업을, navigation 슬롯에는 KrdsMainMenu를, mobileNavigation 슬롯에는 KrdsMainMenu(variant="mobile")를 전달합니다.

헤더는 화면 상단에 고정(sticky)되고 메인 메뉴를 열면 화면 전체에 배경 딤이 깔리므로 예제를 별도 화면(iframe)에 띄웁니다. 예제는 1024px 폭 화면을 축소해 PC 레이아웃으로 보여 줍니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsHeader, KrdsMainMenu, type MainMenuItem } from '@krds.ui/vue'

  const menuItems: MainMenuItem[] = [
    {
      text: '1Depth',
      subItems: [
        {
          text: '2Depth-menu',
          items: [
            { text: '3Depth-menu', href: '#' },
            { text: '3Depth-menu', href: '#' }
          ]
        },
        {
          text: '2Depth-menu',
          items: [
            { text: '3Depth-menu', href: '#' },
            { text: '3Depth-menu', href: '#' }
          ]
        }
      ]
    },
    {
      text: '1Depth',
      subItems: [
        {
          text: '2Depth-menu',
          items: [
            { text: '3Depth-menu', href: '#' },
            { text: '3Depth-menu', href: '#' }
          ]
        }
      ]
    },
    { text: '링크(anchor)', href: '#' }
  ]

  const mobileOpen = ref(false)
</script>

<template>
  <KrdsHeader>
    <template #utility>
      <ul class="utility-list">
        <li>
          <a href="#" class="krds-btn small text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i> </a>
        </li>
        <li>
          <div class="krds-drop-wrap">
            <button type="button" class="krds-btn small text drop-btn">메뉴명 <i class="svg-icon ico-toggle"></i></button>
            <div class="drop-menu">
              <div class="drop-in">
                <ul class="drop-list">
                  <li><a href="#" class="item-link">메뉴명</a></li>
                  <li><a href="#" class="item-link">메뉴명</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </template>

    <template #branding>
      <h2 class="logo">
        <a href="#">
          <span class="sr-only">KRDS - Korea Design System</span>
        </a>
      </h2>
      <div class="header-actions">
        <button type="button" class="btn-navi sch" title="통합검색 레이어">통합검색</button>
        <a href="#" class="btn-navi login">로그인</a>
        <button type="button" class="btn-navi join">회원가입</button>
        <button type="button" class="btn-navi all" aria-controls="mobile-nav" :aria-expanded="mobileOpen" @click="mobileOpen = true">
          전체메뉴
        </button>
      </div>
    </template>

    <template #navigation>
      <KrdsMainMenu :items="menuItems" />
    </template>

    <template #mobileNavigation>
      <KrdsMainMenu v-model:open="mobileOpen" variant="mobile" :items="menuItems" />
    </template>
  </KrdsHeader>
</template>

모바일 ​

1024px 미만 화면에서는 유틸리티 메뉴와 PC 메인 메뉴가 숨겨지고 전체메뉴 버튼이 표시됩니다. 전체메뉴 버튼의 aria-controls를 모바일 드로어 id(KrdsMainMenu의 mobileId, 기본값 mobile-nav)에 연결하고 v-model:open으로 드로어를 엽니다. 아래는 같은 예제를 문서 폭(1024px 미만) 그대로 띄운 것으로, 전체메뉴 버튼으로 드로어를 확인할 수 있습니다.

새 창에서 보기

KrdsHeader ​

Props

이름타입기본값설명
classKrdsClassValue-추가 CSS 클래스
idstring'krds-header'헤더 ID

Slots

이름설명
utility유틸리티 메뉴 슬롯
branding브랜딩 영역 슬롯 (로고, 액션 버튼)
navigation데스크탑 네비게이션 슬롯 — KrdsMainMenu 등 완성된 메뉴 요소를 그대로 전달
mobileNavigation모바일 네비게이션 슬롯 — KrdsMainMenu(variant="mobile") 등 완성된 드로어 요소를 그대로 전달

KrdsMainMenu ​

Props

이름타입기본값설명
itemsMainMenuItem[][]메뉴 아이템 배열
ariaLabelstring'메인 메뉴'메뉴 영역 레이블
variantMainMenuVariant'pc'렌더링 방식
openbooleanfalse모바일 드로어 열림 상태 (v-model:open)
mobileIdstring'mobile-nav'모바일 드로어 요소 id (외부 트리거의 `aria-controls` 대상)
backdropbooleantruePC 메가 패널 배경 딤(backdrop) 사용 여부
closeLabelstring'전체메뉴 닫기'모바일 드로어 닫기 버튼 레이블

Events

이름인자설명
item-click[item: MainMenuAnyItem, mouseEvent: MouseEvent]메뉴 항목을 클릭했을 때
update:open[value: boolean]모바일 메뉴가 열리거나 닫힐 때 (v-model:open)
menu-toggle[index: number, expanded: boolean]1차 메뉴를 펼치거나 접을 때 (순서, 펼침 여부)

Slots

이름설명
bannerPC 서브 패널 배너 영역
header모바일 드로어 헤더 영역 (유틸리티, 로그인, 검색 등)
bottom모바일 드로어 하단 영역