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:

vue

<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.

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.

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.