basic

Breadcrumb

Displays the path to the current resource.

Preview

A preview of the Breadcrumb component with interactive controls.

Preview Code
HomeDocumentationBreadcrumb
Interactive

Installation

Add the Breadcrumb component to your project.

Bash
ng g @ng-cn/core:c breadcrumb

Usage

Import and use the Breadcrumb component in your Angular application.

Template TypeScript
template.html
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Explore different variations and use cases for the Breadcrumb component.

Basic

Preview Code
Interactive

With Ellipsis

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes to apply.