Breadcrumbs Component

A responsive breadcrumb navigation component for Phila UI built with Vue 3 and TypeScript. Features automatic mobile optimization and accessibility support.

Features

• 🎯 TypeScript support with full type definitions
• 📱 Responsive design with mobile-specific navigation
• ♿ Full accessibility support with ARIA labels
• 🏠 Built-in home icon link
• 🔗 Flexible link structure

Installation

npm install @phila/phila-ui-breadcrumbs
# or
yarn add @phila/phila-ui-breadcrumbs
# or
pnpm add @phila/phila-ui-breadcrumbs

Usage

<script setup lang="ts">
import { Breadcrumbs } from "@phila/phila-ui-breadcrumbs";

const breadcrumbItems = [
  { label: "Services", href: "/services" },
  { label: "Cars, parking & transportation", href: "/transportation" },
  { label: "Apply for a parking permit", href: "/parking-permit" },
];
</script>

<template>
  <Breadcrumbs :items="breadcrumbItems" />
</template>

Props

Breadcrumbs

| Prop | Type | Default | Description | | ----------- | ------------------ | ------- | ------------------------------------ | | items | BreadcrumbItem[] | [] | Array of breadcrumb items to display | | className | string | "" | Additional CSS classes to apply | | homeHref | string | "/" | URL for the home icon link |

BreadcrumbItem Interface

interface BreadcrumbItem {
  label: string; // Display text for the breadcrumb
  href?: string; // Optional URL (last item is treated as current page)
}

Events

This component does not emit custom events. Navigation is handled through standard anchor tag clicks.

Examples

Basic Usage

<Breadcrumbs :items="[{ label: 'Services', href: '/services' }, { label: 'Current Page' }]" />

Custom Home Link

<Breadcrumbs :items="breadcrumbItems" home-href="/dashboard" />

With Custom Classes

<Breadcrumbs :items="breadcrumbItems" class-name="my-custom-breadcrumbs" />

Responsive Behavior

• Desktop: Shows full breadcrumb trail with home icon and all items
• Mobile (≤768px): Shows only a "back" link to the parent page with left arrow icon

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT