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 breadcrumb 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: If not using <BApp>, 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>

You can also pass in an id to the component and composable to create a unique breadcrumb trail.

HTML

vue

<template>
  <BBreadcrumb id="foobar" />

  <BFormInput v-model="inputValue" />

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

<script setup lang="ts">
// Input matches the id passed to the component
const breadcrumb = useBreadcrumb('foobar')

const inputValue = ref('')

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

useBreadcrumb

Demo ​

Demo