BreadCrumbs Component

Overview

The BreadCrumbs component is a custom breadcrumb navigation for a Vue.js application. It provides a clear and interactive visual hierarchy, allowing users to navigate between different sections such as the dashboard, parent folders, and child elements (folders or collages). It uses Vuetify's tooltips, buttons, and skeleton loaders to display dynamic breadcrumb paths with responsive behavior.

Features

• Dynamic Breadcrumb Navigation:

  • The component builds breadcrumb paths dynamically based on the provided parent, level, and childrens props, ensuring an accurate representation of the current hierarchy.

• Loading Indicator:

  • While the component is fetching or loading content, a Vuetify v-skeleton-loader is shown to improve user experience by indicating that data is being processed.

• Interactive Tooltips:

  • Tooltips are displayed over navigation buttons (like Home, Folders, Collages, and Child items) to give users clear information about their destination. This makes it easier to understand where each button will navigate.

• Icon-based Navigation:

  • Utilizes icons such as HomeIcon, FolderIcon, CollageIcon, and DownArrowIcon to visually enhance the breadcrumb path and make navigation intuitive for users.

• Parent and Child Navigation:

  • The component allows navigation to the parent folder or collage and also enables direct navigation to specific child items when multiple child elements are present.
  • Users can click the breadcrumb items (represented by icons or names) to navigate to the corresponding sections.

• Adaptive to Hierarchical Levels:

  • The component adapts based on the level prop, showing different icons and navigation paths depending on whether the user is at the top level, inside a folder, or within a specific child item.

• Customizable Content Display:

  • The breadcrumb structure allows you to pass custom parent and child data, dynamically changing the displayed breadcrumb items and tooltips accordingly.

• Programmatic Navigation

  • The navigateToDashboard, navigateToParent, and navigateToChild methods allow programmatic navigation, making it easy to handle route changes and user interaction without tightly coupling the logic with the template.

Styles

The component uses scoped styles for aligning items within rows:

.row-display-center {
  display: flex;
  align-items: center;
}

This ensures proper vertical alignment for the breadcrumb elements and icons.

Methods

navigateToDashboard: Redirects the user to the workspace's dashboard by navigating to the workspace_id-dam-dashboard route.

navigateToParent: Handles navigation to the parent folder or collage depending on the current breadcrumb level and parent prop. If at level 1, navigates using the parentLink prop. For Folders, navigates to the workspace_id-dam-folders route. For Collages, navigates to the workspace_id-dam-collage route. If childrens is present, navigates to the first child element.

navigateToChild(url): Navigates to a specific child element based on the provided url.

Usage

<template>
    <BreadCrumbs
    :parent="'Folders'"
    :parentLink="{ name: 'workspace_id-dam-folders', params: { workspace_id: 'abc123' } }"
    :level="1"
    :childrens="[{ name: 'Documents', url: '/documents' }, { name: 'Photos', url: '/photos' }]"
    />

</template>

<script>
import BreadCrumbs from '@/components/dam/BreadCrumbs.vue'; // Adjust the import path

export default {
  components: {
    BreadCrumbs
  },
};
</script>

Example

<BreadCrumbs
  :parent="'Collages'"
  :level="2"
  :childrens="[{ name: 'Vacation', url: '/vacation' }, { name: 'Work', url: '/work' }]"
/>

This renders breadcrumbs for a collage structure, allowing users to navigate through different folders and collages with tooltips providing guidance.