useBreadcrumb

View Source

useBreadcrumb is a helper utility for the BBreadcrumb component. It provides a globally changable context so you can modify a breadcrumb. It should be noted that the breacrumb component will automatically use the global context by default. useBreadcrumb is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over useBreadcrumb

Note: You must have initialized the createBootstrap plugin for this to work properly. Read here

Demo

HTML

vue

<template>
  <BBreadcrumb />

  <BFormInput v-model="inputValue" />

  <BButton @click="addItem">Add</BButton>
  <BButton variant="danger" @click="breadcrumb.reset">Clear</BButton>
</template>

<script setup lang="ts">
const breadcrumb = useBreadcrumb()

const inputValue = ref('')

const addItem = () => {
  breadcrumb.items?.value.push(inputValue.value)
  inputValue.value = ''
}
</script>

useBreadcrumb

Demo ​

Demo