메인 메뉴 Main menu

메인 메뉴는 서비스 전체의 구조를 보여주고 주요 화면으로 이동할 수 있게 하는 메뉴이다. 일반적으로 헤더 영역에 위치하며, 데스크탑에서는 메가 메뉴 형태로, 모바일에서는 드로어 형태로 제공된다.

variant 속성으로 두 형태를 전환합니다. PC 메가 메뉴는 원본 KRDS처럼 패널을 열면 페이지 전체에 배경 딤(backdrop)을 깝니다. 메뉴가 딤 위에 보이려면 헤더(#krds-header, KrdsHeader) 안에 두어야 하며, 헤더 밖에서 쓰면 :backdrop="false"로 끕니다.

PC 메가 메뉴

PC 메가 메뉴는 1024px 이상 화면에서만 표시됩니다. 미리보기는 헤더 밖에 두므로 :backdrop="false"로 배경 딤을 끄고, PC 레이아웃 그대로 보이도록 1024px 폭으로 표시합니다(가로 스크롤). 헤더 안에서 쓰는 예는 헤더를 참고하세요.

- 민원신청바로가기
  증명서 발급
  전입신고
  여권 재발급
  주민등록 등본
  신규 서비스
- 생활지원
  주거 지원
  교육 지원
  의료 지원
- 고용정보
  채용 공고
  메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.
  직업 훈련
  메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.
- 통합검색 바로가기
- 외부 서비스
- 정책자료
  보도자료
  입법예고
  연구보고서
- 통계정보
  국가통계
  지역통계
알림소식
공지사항
보도자료
행사안내
채용정보
입찰공고
고시공고
기관소개

vue

<script setup lang="ts">
  import { KrdsMainMenu, type MainMenuItem } from '@krds.ui/vue'

  const items: MainMenuItem[] = [
    {
      text: '정보서비스',
      subItems: [
        {
          text: '민원신청',
          title: '민원신청',
          titleLink: { href: '#', text: '바로가기' },
          layout: 'between',
          banner: true,
          items: [
            { text: '증명서 발급', href: '#' },
            { text: '전입신고', href: '#' },
            { text: '여권 재발급', href: '#' },
            { text: '주민등록 등본', href: '#', selected: true }
          ]
        },
        {
          text: '생활지원',
          title: '생활지원',
          items: [
            { text: '주거 지원', href: '#' },
            { text: '교육 지원', href: '#' },
            { text: '의료 지원', href: '#' }
          ]
        },
        {
          text: '고용정보',
          title: '고용정보',
          items: [
            {
              text: '채용 공고',
              href: '#',
              description: '메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.',
              external: true
            },
            {
              text: '직업 훈련',
              href: '#',
              description: '메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.',
              selected: true
            }
          ]
        },
        { text: '통합검색 바로가기', href: '#' },
        { text: '외부 서비스', href: 'https://www.krds.go.kr', external: true }
      ]
    },
    {
      text: '정책정보',
      subItems: [
        {
          text: '정책자료',
          title: '정책자료',
          layout: 'between',
          items: [
            { text: '보도자료', href: '#' },
            { text: '입법예고', href: '#' },
            { text: '연구보고서', href: '#' }
          ]
        },
        {
          text: '통계정보',
          title: '통계정보',
          items: [
            { text: '국가통계', href: '#' },
            { text: '지역통계', href: '#' }
          ]
        }
      ]
    },
    {
      text: '알림소식',
      title: '알림소식',
      layout: 'between',
      items: [
        { text: '공지사항', href: '#' },
        { text: '보도자료', href: '#' },
        { text: '행사안내', href: '#' },
        { text: '채용정보', href: '#' },
        { text: '입찰공고', href: '#' },
        { text: '고시공고', href: '#' }
      ]
    },
    { text: '기관소개', href: '#' }
  ]
</script>

<template>
  <KrdsMainMenu :items="items" :backdrop="false">
    <template #banner>
      <span class="krds-badge bg-secondary">신규 서비스</span>
      <button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
    </template>
  </KrdsMainMenu>
</template>

PC 2depth 없는 메뉴

2depth 목록 없이 마지막 뎁스 링크만 나열하는 경우 single-list 레이아웃으로 렌더링됩니다. items만 지정하면 됩니다.

vue

<script setup lang="ts">
  import { KrdsMainMenu, type MainMenuItem } from '@krds.ui/vue'

  const items: MainMenuItem[] = [
    {
      text: '알림소식',
      title: '알림소식',
      layout: 'between',
      items: [
        { text: '공지사항', href: '#' },
        { text: '보도자료', href: '#' },
        { text: '행사안내', href: '#' },
        { text: '채용정보', href: '#' },
        { text: '입찰공고', href: '#' },
        { text: '고시공고', href: '#' }
      ]
    },
    { text: '기관소개', href: '#' }
  ]
</script>

<template>
  <KrdsMainMenu :items="items" :backdrop="false" aria-label="주요 메뉴" />
</template>

모바일 드로어 메뉴

모바일 드로어는 v-model:open으로 제어합니다. 외부 트리거 버튼에 aria-controls로 mobileId를 연결하고 aria-expanded를 함께 관리합니다. 2depth의 items는 3depth로, 3depth의 items는 전체 화면 4depth 패널로 렌더링됩니다.

드로어는 화면 전체를 덮는 고정 위치 요소이고 1024px 이상 화면에서는 표시되지 않으므로, 예제를 별도 화면(iframe)에 띄웁니다.

새 창에서 보기

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsMainMenu, type MainMenuItem } from '@krds.ui/vue'

  const items: MainMenuItem[] = [
    {
      text: '정보서비스',
      subItems: [
        { text: '민원신청', href: '#' },
        { text: '생활지원', href: '#', selected: true },
        {
          text: '고용정보',
          items: [
            { text: '채용 공고', href: '#' },
            {
              text: '직업 훈련',
              href: '#',
              panelTitle: '직업 훈련',
              items: [
                { text: '국비 지원 과정', href: '#' },
                { text: '재직자 과정', href: '#' },
                { text: '온라인 과정', href: '#' }
              ]
            },
            { text: '고용 통계', href: '#' }
          ]
        }
      ]
    },
    {
      text: '정책정보',
      subItems: [
        { text: '정책자료', href: '#' },
        { text: '통계정보', href: '#' }
      ]
    },
    {
      text: '알림소식',
      subItems: [
        { text: '공지사항', href: '#' },
        { text: '보도자료', href: '#' }
      ]
    },
    {
      text: '기관소개',
      subItems: [
        { text: '인사말', href: '#' },
        { text: '조직도', href: '#' }
      ]
    }
  ]

  const isOpen = ref(false)
</script>

<template>
  <div>
    <button type="button" class="krds-btn medium primary" aria-controls="mobile-nav" :aria-expanded="isOpen" @click="isOpen = true">
      전체메뉴 열기
    </button>
    <KrdsMainMenu v-model:open="isOpen" variant="mobile" :items="items">
      <template #header>
        <div class="gnb-login">
          <button type="button" class="krds-btn large text">로그인을 해주세요</button>
        </div>
      </template>
      <template #bottom>
        <a href="#" class="krds-btn small text">개인정보처리방침</a>
      </template>
    </KrdsMainMenu>
  </div>
</template>

KrdsMainMenu

Props

이름	타입	기본값	설명
`items`	`MainMenuItem[]`	`[]`	메뉴 아이템 배열
`ariaLabel`	`string`	`'메인 메뉴'`	메뉴 영역 레이블
`variant`	`MainMenuVariant`	`'pc'`	렌더링 방식
`open`	`boolean`	`false`	모바일 드로어 열림 상태 (v-model:open)
`mobileId`	`string`	`'mobile-nav'`	모바일 드로어 요소 id (외부 트리거의 `aria-controls` 대상)
`backdrop`	`boolean`	`true`	PC 메가 패널 배경 딤(backdrop) 사용 여부
`closeLabel`	`string`	`'전체메뉴 닫기'`	모바일 드로어 닫기 버튼 레이블

Events

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

Slots

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

메인 메뉴 Main menu ​

PC 메가 메뉴 ​

민원신청바로가기

생활지원

고용정보

채용 공고

직업 훈련

정책자료

통계정보

PC 2depth 없는 메뉴 ​

모바일 드로어 메뉴 ​

KrdsMainMenu ​