README
@chakra-ui/c-breadcrumb
Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages
Installation
yarn add @chakra-ui/c-breadcrumb
# or
npm i @chakra-ui/c-breadcrumb
Import components
Chakra UI Vue exports 3 breadcrumb related components:
CBreadcrumb
: The parent container for breadcrumbs.CBreadcrumbItem
: Individual breadcrumb element containing a link and a divider.CBreadcrumbLink
: The breadcrumb link.
import { CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink } from "@chakra-ui/vue-next"
Usage
Add isCurrentPage
prop to the CBreadcrumbItem
that matches the current path.
When this prop is present, the CBreadcrumbItem
doesn't have a separator, and
the CBreadcrumbLink
has aria-current
set to page
.
<c-breadcrumb>
<c-breadcrumb-item>
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item>
<c-breadcrumb-link as="router-link" to="/docs">Docs</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item isCurrentPage>
<c-breadcrumb-link>Help</c-breadcrumb-link>
</c-breadcrumb-item>
</c-breadcrumb>
Separators
Change the separator used in the breadcrumb by passing a string, like -
element.
<c-breadcrumb separator="-">
<c-breadcrumb-item>
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item>
<c-breadcrumb-link as="router-link" to="/docs">Docs</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item isCurrentPage>
<c-breadcrumb-link>Help</c-breadcrumb-link>
</c-breadcrumb-item>
</c-breadcrumb>
Using the separator slot
You can override the rendered spearator by using the v-slot:separator
which will render any component you want as the separator for the CBreadcrumb
component
<c-breadcrumb>
<template v-slot:separator>
<c-icon name="chevron-right" />
</template>
<c-breadcrumb-item>
<c-breadcrumb-link as="router-link" to="/">Home</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item>
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item is-current-page>
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
</c-breadcrumb-item>
</c-breadcrumb>
Using a functional icon component as the separator
You can also pass a functional component into the :separator
prop
<template>
<c-breadcrumb :separator="SunIcon">
<c-breadcrumb-item>
<c-breadcrumb-link as="router-link" to="/">Home</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item>
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
</c-breadcrumb-item>
<c-breadcrumb-item is-current-page>
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
</c-breadcrumb-item>
</c-breadcrumb>
</template>
<script setup>
const SunIcon = () => {
return h(CIcon, {
name: 'sun',
})
}
</script>