Breadcrumb

A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

free

Basic Breadcrumb

Use label="" and link="" to define the name and the path of the link for each breadcrumb item. Basic Breadcrumb example below.

HTML

<ply-breadcrumb>
  <ply-breadcrumb-item label="Home" link="/"></ply-breadcrumb-item>
  <ply-breadcrumb-item label="Settings" link="/settings"></ply-breadcrumb-item>
  <ply-breadcrumb-item label="Profile"></ply-breadcrumb-item>
</ply-breadcrumb>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add breadcrumb
// Paths are relative to aliases.components (default: src/app/components)
import { BreadcrumbItemComponent } from './breadcrumb/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';

@Component({
  selector: 'app-breadcrumb-example',
  imports: [
    BreadcrumbComponent,
    BreadcrumbItemComponent
  ],
  template: `...`
})
export class BreadcrumbExampleComponent {}

Install

bash

npx ply-ui-cli add breadcrumb

Breadcrumb with icon

Use icon="" and add the name of the preferred icon from our Icons Set.

HTML

<ply-breadcrumb>
  <ply-breadcrumb-item icon="home" label="Home" link="/home"></ply-breadcrumb-item>
  <ply-breadcrumb-item icon="settings" label="settings" link="/settings"></ply-breadcrumb-item>
  <ply-breadcrumb-item icon="user" label="User"></ply-breadcrumb-item>
</ply-breadcrumb>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add breadcrumb
// Paths are relative to aliases.components (default: src/app/components)
import { BreadcrumbItemComponent } from './breadcrumb/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';

@Component({
  selector: 'app-breadcrumb-example',
  imports: [
    BreadcrumbComponent,
    BreadcrumbItemComponent
  ],
  template: `...`
})
export class BreadcrumbExampleComponent {}

Install

bash

npx ply-ui-cli add breadcrumb

Another Breadcrumb icon use example

HTML

<ply-breadcrumb>
  <ply-breadcrumb-item icon="home" label="Home" link="/home"></ply-breadcrumb-item>
  <ply-breadcrumb-item label="settings" link="/settings"></ply-breadcrumb-item>
  <ply-breadcrumb-item label="User"></ply-breadcrumb-item>
</ply-breadcrumb>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add breadcrumb
// Paths are relative to aliases.components (default: src/app/components)
import { BreadcrumbItemComponent } from './breadcrumb/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';

@Component({
  selector: 'app-breadcrumb-example',
  imports: [
    BreadcrumbComponent,
    BreadcrumbItemComponent
  ],
  template: `...`
})
export class BreadcrumbExampleComponent {}

Install

bash

npx ply-ui-cli add breadcrumb

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add breadcrumb

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add breadcrumb
// Paths are relative to aliases.components (default: src/app/components)
import { BreadcrumbItemComponent } from './breadcrumb/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';

@Component({
  selector: 'app-your-component',
  imports: [
    BreadcrumbComponent,
    BreadcrumbItemComponent
  ],
  template: `...`
})
export class YourComponent {}

API for breadcrumb — generated from JSDoc in the library source.

API reference for breadcrumb
API	Member	Type	Default	Description
`ply-breadcrumb`	`—`	`—`	—	A container component for breadcrumb navigation. Usually contains multiple `ply-breadcrumb-item` components. Stays on a single row; the current (last) item truncates with an ellipsis.
`ply-breadcrumb-item`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-breadcrumb-item`	`icon`	`string \| undefined`	`undefined`	—
`ply-breadcrumb-item`	`link`	`string \| undefined`	`undefined`	—
`ply-breadcrumb-item`	`label`	`string`	`''`	—
`ply-breadcrumb-item`	`separator`	`string \| undefined`	`undefined`	—

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).