Explore Our Templates 🚀
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. See official bootstrap document
Basic example
Add active prop to the active Breadcrumb.Item. Do not set both active and href attributes.active overrideshrefandspanelement is rendered instead of a.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav><template>
<BBreadcrumb :items="breadcrumbItems" />
</template>
<script setup lang="ts">
import type {BreadcrumbItem} from 'bootstrap-vue-next'
import {ref} from 'vue'
const breadcrumbItems = ref<BreadcrumbItem[]>([
{text: 'All images', href: '#'},
{text: 'Jampack', href: '#'},
{text: 'Gallery'},
])
</script><template>
<BBreadcrumb :items="breadcrumbItems" />
</template>
<script setup lang="ts">
import type {BreadcrumbItem} from 'bootstrap-vue-next'
import {ref} from 'vue'
const breadcrumbItems = ref<BreadcrumbItem[]>([
{text: 'All images', href: '#'},
{text: 'Jampack', href: '#'},
{text: 'Gallery'},
])
</script><nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>Sizes
Use.breadcrumb-sm classes with .breadcrumbfor sizes.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-sm breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav><template>
<div>
<BBreadcrumb :items="breadcrumbItems" class="mb-2" />
<BBreadcrumb :items="breadcrumbItems" class="breadcrumb-sm" />
</div>
</template>
<script setup lang="ts">
import type {BreadcrumbItem} from 'bootstrap-vue-next'
import {ref} from 'vue'
const breadcrumbItems = ref<BreadcrumbItem[]>([
{text: 'All images', href: '#'},
{text: 'Jampack', href: '#'},
{text: 'Gallery'},
])
</script><template>
<div>
<BBreadcrumb :items="breadcrumbItems" class="mb-2" />
<BBreadcrumb :items="breadcrumbItems" class="breadcrumb-sm" />
</div>
</template>
<script setup lang="ts">
import type {BreadcrumbItem} from 'bootstrap-vue-next'
import {ref} from 'vue'
const breadcrumbItems = ref<BreadcrumbItem[]>([
{text: 'All images', href: '#'},
{text: 'Jampack', href: '#'},
{text: 'Gallery'},
])
</script><nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-sm breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>