Appearance

BreadCrumbs Component ​

File Information ​

  • Path: app/components/miscellaneous/BreadCrumbs.vue
  • Purpose: Hierarchical navigation breadcrumbs component showing current location and navigation path
  • Type: Miscellaneous Component

Overview ​

The BreadCrumbs component displays a hierarchical navigation path showing the user's current location. It supports navigation to parent levels and child items, with ellipsis for long paths.

Features ​

  • Hierarchical Display: Shows parent → children navigation path
  • Home Button: Dashboard/home button with icon
  • Parent Navigation: Clickable parent level with icon
  • Child Items: Multiple child items with navigation
  • Ellipsis Support: Shows "..." for long paths
  • Tooltips: Tooltips for truncated items
  • Level Support: Different display based on navigation level
  • Details Page: Special handling for details pages

Props ​

typescript
{
  parent?: string        // Parent level name (e.g., "Folders", "Collages")
  parentLink?: object    // Parent navigation link
  detailsPage?: boolean  // Whether on details page
  level?: number         // Navigation level (0, 1, 2)
  childrens?: array      // Array of child items with name and url
  flag?: string          // Context flag
  items?: array          // Optional items array (not used)
  separator?: string     // Separator string (optional)
}

Child Item Structure ​

typescript
{
  name: string           // Display name
  url: string            // Navigation URL
  isEllipsis?: boolean   // Whether this is an ellipsis item
}

Key Functionality ​

Home Button ​

  • Shows home icon button
  • Only visible when level < 2
  • Navigates to dashboard
  • Tooltip: "Dashboard"

Parent Level ​

  • Level 0: Shows parent name as text
  • Level 1+: Shows parent as clickable icon button
  • Icon: gridIcon for Collages, folderIcon for Folders
  • Tooltip: Shows full parent name

Child Items ​

  • Displays child items with navigation
  • Clickable links (except on details page)
  • Ellipsis for long paths
  • Arrow separators between items
  • Handles navigation to parent
  • Handles navigation to child items
  • Prevents default link behavior
  • Uses router navigation

Usage Example ​

vue
<template>
  <BreadCrumbs
    parent="Folders"
    :parent-link="{ name: 'brand_name-folders', params: { brand_name: 'mybrand' } }"
    :level="1"
    :childrens="[
      { name: 'Subfolder 1', url: '/folders/123' },
      { name: 'Subfolder 2', url: '/folders/456' }
    ]"
    :details-page="false"
  />
</template>

<script setup lang="ts">
import BreadCrumbs from '~/components/miscellaneous/BreadCrumbs.vue'
</script>

Styling ​

Uses global SCSS classes:

  • .bread-crumbs - Main container
  • .bread-crumbs-list - List container
  • .bread-crumbs-arrow - Arrow separator
  • .linked - Clickable link styling
  • .detail-linked - Details page link styling
  • .h-bg-purple-light - Icon button hover