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.

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.

Help Ukraine to stop russian aggression