Breadcrumb
Overview
The VBreadcrumb
component is a flexible and highly customizable element built using the ShadCN Vue library (official documentation). It displays the path to the current resource using a hierarchy of links.
This component is composed of several subcomponents, each with a specific role in managing different parts of the bredcrumb:
VBreadcrumb
: The root container that wraps the entire breadcrumb.VBreadcrumbList
: A container for breadcrumb items.VBreadcrumbItem
: Represents a single breadcrumb item.VBreadcrumbLink
: A clickable link for navigation.VBreadcrumbEllipsis
: Represents collapsed items using ellipsis.VBreadcrumbSeparator
: Displays a visual separator between items.
These components are located in the path: ui-kit/src/components/Base/VBreadcrumb
.
Usage
Use VBreadcrumbsList
(ui-kit/src/components/VBreadcrumb/VBreadcrumbsList.vue) to dysplay basic default styles for bredcrumbs
Props:
data
(required): An array of bredcrumb, where each element has inreface
interface IBreadcrumb {
text: string;
href?: string;
}
Features:
- Displays a list of breadcumbs in a horizontal row.
- If href is not provided then it is simple text styles with no ability to click link
Example
Example with ->
as Separator:
<VBreadcrumbsList
:data="breadcrumbsList"
>
->
</VBreadcrumbsList>
Advanced Usages
Collapsed Breadcrumbs
For scenarios where the breadcrumb trail becomes too long, you can use the VBreadcrumbsListCollapsed
component in location ui-kit/src/components/VBreadcrumb
. This will collapse intermediate items into an ellipsis (...) while keeping the first and last few breadcrumbs visible.
Dropdown
The VBreadcrumbsListDropdown
component enables you to collapse intermediate breadcrumb items into a dropdown. This dropdown provides an intuitive way to access the hidden items when needed.
Collapsed Dropdown
Combine the functionality of collapsed breadcrumbs with a dropdown using the VBreadcrumbsListCollapsedDropdown
component. This setup is ideal for complex breadcrumb structures, offering an ellipsis with a dropdown menu for hidden items.