브레드크럼
페이지 경로 표시 컴포넌트입니다.
#breadcrumb #path
HTML
<nav class="krds-breadcrumb-wrap" aria-label="현재 경로" id="breadcrumb">
<ol class="breadcrumb">
<li class="home"><a href="#" class="txt">홈</a></li>
<li><a href="#" class="txt">서비스 신청</a></li>
<li><a href="#" class="txt">서비스 신청2</a></li>
</ol>
</nav>Vue 컴포넌트
<template>
<nav class="krds-breadcrumb-wrap" aria-label="현재 경로" id="breadcrumb">
<ol class="breadcrumb">
<li class="home"><a href="#" class="txt">홈</a></li>
<li><a href="#" class="txt">서비스 신청</a></li>
<li><a href="#" class="txt">서비스 신청2</a></li>
</ol>
</nav>
</template>
<script setup lang="ts">
// 브레드크럼 컴포넌트
// 페이지 경로 표시 컴포넌트입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- breadcrumb.html
- 카테고리
- 네비게이션
- 난이도
- 쉬움