Github

Breadcrumb

Breadcrumbs are a navigation system used to show a user location in a site or app.

Component variations

Basic Breadcrumb

A simple breadcrumb with three levels

Long Breadcrumb

Breadcrumb with multiple levels

Usage Guidelines

Import

Import the breadcrumb component in your module or component:

import-breadcrumb.ts

Copy code

Basic Implementation

Here is a basic example of using the breadcrumb component:

1. Define data

my.component.ts

Copy code

2. Implementation in template

my.component.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
items
BreadcrumbItem[]
[]
Yes
Array of objects containing { label: string, url?: string }
separatorIcon
string
'vd-icon-chevron-right'
No
Icon name to use as a separator
size
'sm' | 'md' | 'lg'
'md'
No
Size of the breadcrumb items and separators

Outputs

Event emitters for component interactions:

Property
Type
Description
itemClick
EventEmitter<BreadcrumbItem>
Emitted when an item is clicked

Best Practices

When to Use

  • Use Breadcrumb when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Breadcrumb when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide a URL for links that users should be able to open in a new tab
  • The last item usually represents the current page and shouldn't have a URL
  • Keep breadcrumb labels short and concise
  • Use standard separators like chevrons or slashes for clarity
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the breadcrumb features in this section

example.html

Copy code