Open in Claude Open in ChatGPT

[ Installation ] 

npx wally-ui add breadcrumb

[ Preview ]

[ Import ]

Import breadcrumb item interface

import { Breadcrumb, BreadcrumbItem } from './components/wally-ui/breadcrumb/breadcrumb';

Import breadcrumb component

@Component({
  selector: 'app-example',
  imports: [Breadcrumb],
  templateUrl: './example.html',
  styleUrl: './example.css'
})

[ Basic Usage ]

Simple Breadcrumb 

breadcrumbItems: BreadcrumbItem[] = [
  { label: 'Components' }
];
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>

[ Examples ]

Multi-level Navigation 

breadcrumbItems: BreadcrumbItem[] = [
  { label: 'Home', url: '/' },
  { label: 'Documentation', url: '/documentation' },
  { label: 'Components', url: '/documentation/components' },
  { label: 'Breadcrumb' }
];

Single Item 

breadcrumbItems: BreadcrumbItem[] = [
  { label: 'Components' }
];

[ Properties ]

Items Property 

items: BreadcrumbItem[] = [];

Array of breadcrumb items to display

[ Interface ] 

interface BreadcrumbItem {
  label: string;
  url?: string;
}

[ Under Construction ]

Custom Separators

UNDER CONSTRUCTION

Support for custom separator characters and icons between breadcrumb items.

Dropdown Overflow

UNDER CONSTRUCTION

Collapse breadcrumb items into a dropdown when there are too many to display.