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.
Use label="" and link="" to define the name and the path of the link for each breadcrumb item. Basic Breadcrumb example below.
Use icon="" and add the name of the preferred icon from our Icons Set.
Another Breadcrumb icon use example
Run the following command to add this component to your project:
npx base-ui-cli add breadcrumb
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-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 | Member | Type | Default | Description |
|---|---|---|---|---|
base-breadcrumb | — | — | — | A container component for breadcrumb navigation. Usually contains multiple `base-breadcrumb-item` components. Stays on a single row; the current (last) item truncates with an ellipsis. |
base-breadcrumb-item | class | string | '' | Additional host CSS classes (merged via cn()). |
base-breadcrumb-item | icon | string | undefined | undefined | — |
base-breadcrumb-item | link | string | undefined | undefined | — |
base-breadcrumb-item | label | string | '' | — |
base-breadcrumb-item | separator | string | undefined | undefined | — |
Page Content