Guide for using the Breadcrumbs component in Layrix applications
This skill provides guidance on how to properly use the Breadcrumbs component in Layrix applications.
The Breadcrumbs component is located in src/shared/ui/primitives/Breadcrumbs/ and is exported from @shared/ui.
<script setup lang="ts">
import { Breadcrumbs } from '@shared/ui';
import type { BreadcrumbItem } from '@shared/ui';
const items: BreadcrumbItem[] = [
{ label: 'Home', to: '/' },
{ label: 'Products', to: '/products' },
{ label: 'Details' }
];
</script>
<template>
<Breadcrumbs :items="items" />
</template>
The Breadcrumbs component uses Quasar's color and active-color props for proper color management:
foreground color (normal text color) by defaultprimary color with underlinetext-muted colorImportant: Do NOT try to override colors with CSS. Use the component's built-in color system.
Each item in the items array accepts all properties from Quasar's QBreadcrumbsEl:
interface BreadcrumbItem {
label: string; // Required: Display text
icon?: any; // Optional: Tabler icon object
to?: string | object; // Optional: Vue Router path
href?: string; // Optional: External link
target?: string; // Optional: Link target (_blank, etc.)
disable?: boolean; // Optional: Disable the item
exact?: boolean; // Optional: Exact router match
class?: string; // Optional: Custom CSS class
style?: string | object; // Optional: Custom styles
replace?: boolean; // Optional: Replace history
append?: boolean; // Optional: Append to path
}
Always import Tabler icons from quasar-extras-svg-icons/tabler-icons-v2:
<script setup lang="ts">
import { Breadcrumbs } from '@shared/ui';
import type { BreadcrumbItem } from '@shared/ui';
import { tabHome, tabSettings, tabUser } from 'quasar-extras-svg-icons/tabler-icons-v2';
const items: BreadcrumbItem[] = [
{ label: 'Home', icon: tabHome, to: '/' },
{ label: 'Settings', icon: tabSettings, to: '/settings' },
{ label: 'Account', icon: tabUser }
];
</script>
<template>
<Breadcrumbs :items="items" />
</template>
Note: Icon separators are not supported. Only text-based separators work reliably.
Use text characters or symbols as separators:
<!-- Default separator (/) -->
<Breadcrumbs :items="items" />
<!-- Custom text separator -->
<Breadcrumbs separator=">" :items="items" />
<!-- Unicode separator -->
<Breadcrumbs separator="›" :items="items" />
Mix internal routes with external links:
<script setup lang="ts">
const items: BreadcrumbItem[] = [
{ label: 'Home', to: '/' },
{ label: 'Documentation', href: 'https://quasar.dev', target: '_blank' },
{ label: 'Current Page' }
];
</script>
<template>
<Breadcrumbs :items="items" />
</template>
The component supports two variants, though they currently behave the same:
<!-- Primary variant -->
<Breadcrumbs variant="primary" :items="items" />
<!-- Regular variant (default) -->
<Breadcrumbs variant="regular" :items="items" />
Control breadcrumb alignment:
<!-- Left aligned (default) -->
<Breadcrumbs :items="items" />
<!-- Center aligned -->
<Breadcrumbs align="center" :items="items" />
<!-- Right aligned -->
<Breadcrumbs align="right" :items="items" />
Control spacing between items:
<!-- Small gutter (default) -->
<Breadcrumbs :items="items" />
<!-- Large gutter -->
<Breadcrumbs gutter="lg" :items="items" />
<!-- No gutter -->
<Breadcrumbs gutter="none" :items="items" />
<script setup lang="ts">
import { PageContainer, Breadcrumbs } from '@shared/ui';
import type { BreadcrumbItem } from '@shared/ui';
const breadcrumbs: BreadcrumbItem[] = [
{ label: 'Dashboard', to: '/dashboard' },
{ label: 'Users', to: '/users' },
{ label: 'Profile' }
];
</script>
<template>
<PageContainer title="User Profile">
<Breadcrumbs :items="breadcrumbs" class="q-mb-md" />
<!-- Page content -->
</PageContainer>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { Breadcrumbs } from '@shared/ui';
import type { BreadcrumbItem } from '@shared/ui';
const route = useRoute();
const breadcrumbs = computed<BreadcrumbItem[]>(() => {
const paths = route.path.split('/').filter(Boolean);
const items: BreadcrumbItem[] = [{ label: 'Home', to: '/' }];
let path = '';
paths.forEach((segment, index) => {
path += `/${segment}`;
items.push({
label: segment.charAt(0).toUpperCase() + segment.slice(1),
to: index === paths.length - 1 ? undefined : path
});
});
return items;
});
</script>
<template>
<Breadcrumbs :items="breadcrumbs" />
</template>
@shared/uiBreadcrumbItem[]If breadcrumb colors don't match the design system:
<!-- ❌ Wrong: Trying to override with CSS -->
<Breadcrumbs :items="items" class="my-custom-colors" />
<!-- ✅ Correct: Let the component handle colors -->
<Breadcrumbs :items="items" />
The component uses Quasar's color="foreground" and active-color="text-muted" props internally. CSS alone cannot override these.
If icons show as SVG paths or don't render:
<!-- ❌ Wrong: Using string icon names -->
<script setup lang="ts">
const items = [
{ label: 'Home', icon: 'ti-home', to: '/' }
];
</script>
<!-- ✅ Correct: Using imported Tabler icon objects -->
<script setup lang="ts">
import { tabHome } from 'quasar-extras-svg-icons/tabler-icons-v2';
const items = [
{ label: 'Home', icon: tabHome, to: '/' }
];
</script>
Hover effects are built into the component. If they're not visible:
to or href property| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | [] | Array of breadcrumb items |
variant | 'primary' | 'regular' | 'regular' | Style variant |
separator | string | '/' | Separator between items |
gutter | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | Spacing between items |
align | 'left' | 'center' | 'right' | 'between' | 'around' | 'evenly' | 'left' | Alignment |
activeColor | string | 'text-muted' | Color for active item (managed internally) |
See the full demo at /breadcrumbs route in the application, showing all features and variations.