breadcrumb
Use a .breadcrumb navigation landmark with a native ordered list, links,
separators, and aria-current="page" for the current location. The class
distinguishes the trail from other navigation landmarks.
<nav aria-label="breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#">Home</a>
</li>
<li aria-hidden="true">/</li>
<li>
<span aria-current="page">Docs</span>
</li>
</ol>
</nav>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Breadcrumb</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="breadcrumb-basic breadcrumb-link"
>
<nav aria-label="breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#">Home</a>
</li>
<li aria-hidden="true">/</li>
<li>
<a href="#">Components</a>
</li>
<li aria-hidden="true">/</li>
<li>
<span aria-current="page">Breadcrumb</span>
</li>
</ol>
</nav>
</body>
</html>
Variants And Composition
Empty separator and ellipsis parts receive their standard icons. Author custom separator content directly, and compose dropdowns with the existing semantic Dropdown component.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Breadcrumb Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="breadcrumbSelection = 'None'; rtlBreadcrumbSelection = 'لا شيء'"
data-example="breadcrumb-demo breadcrumb-dropdown breadcrumb-ellipsis breadcrumb-rtl breadcrumb-separator"
>
<main>
<section aria-labelledby="breadcrumb-separator-heading">
<h2 id="breadcrumb-separator-heading">Custom separator</h2>
<nav aria-label="Custom separator breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#home">Home</a>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<a href="#components">Components</a>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<span aria-current="page" aria-disabled="true">Breadcrumb</span>
</li>
</ol>
</nav>
</section>
<section aria-labelledby="breadcrumb-ellipsis-heading">
<h2 id="breadcrumb-ellipsis-heading">Ellipsis</h2>
<nav aria-label="Ellipsis breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#home">Home</a>
</li>
<li aria-hidden="true"></li>
<li>
<span aria-hidden="true">...</span>
</li>
<li aria-hidden="true"></li>
<li>
<a href="#components">Components</a>
</li>
<li aria-hidden="true"></li>
<li>
<span aria-current="page" aria-disabled="true">Breadcrumb</span>
</li>
</ol>
</nav>
</section>
<section aria-labelledby="breadcrumb-demo-heading">
<h2 id="breadcrumb-demo-heading">Collapsed trail</h2>
<nav aria-label="Collapsed breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#home">Home</a>
</li>
<li aria-hidden="true"></li>
<li>
<span ng-dropdown-menu>
<button
type="button"
variant="ghost"
size="icon-sm"
aria-label="Toggle breadcrumb menu"
>
<span aria-hidden="true">...</span>
</button>
<menu>
<section>
<button ng-click="breadcrumbSelection = 'Documentation'">
Documentation
</button>
<button ng-click="breadcrumbSelection = 'Themes'">
Themes
</button>
<button ng-click="breadcrumbSelection = 'GitHub'">
GitHub
</button>
</section>
</menu>
</span>
</li>
<li aria-hidden="true"></li>
<li>
<a href="#components">Components</a>
</li>
<li aria-hidden="true"></li>
<li>
<span aria-current="page" aria-disabled="true">Breadcrumb</span>
</li>
</ol>
</nav>
<output> Selected: {{ breadcrumbSelection }} </output>
</section>
<section aria-labelledby="breadcrumb-dropdown-heading">
<h2 id="breadcrumb-dropdown-heading">Dropdown</h2>
<nav aria-label="Dropdown breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="#home">Home</a>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<span ng-dropdown-menu>
<button type="button">
Components
<svg
icon="inline-end"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<menu>
<section>
<button>Documentation</button>
<button>Themes</button>
<button>GitHub</button>
</section>
</menu>
</span>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<span aria-current="page" aria-disabled="true">Breadcrumb</span>
</li>
</ol>
</nav>
</section>
<section aria-labelledby="breadcrumb-rtl-heading" dir="rtl" lang="ar">
<h2 id="breadcrumb-rtl-heading">اتجاه من اليمين إلى اليسار</h2>
<nav aria-label="مسار التنقل" class="breadcrumb">
<ol>
<li>
<a href="#home">الرئيسية</a>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<span ng-dropdown-menu>
<button type="button">
المكونات
<svg
icon="inline-end"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<menu>
<section>
<button ng-click="rtlBreadcrumbSelection = 'التوثيق'">
التوثيق
</button>
<button ng-click="rtlBreadcrumbSelection = 'السمات'">
السمات
</button>
<button ng-click="rtlBreadcrumbSelection = 'جيت هاب'">
جيت هاب
</button>
</section>
</menu>
</span>
</li>
<li aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="2.5" />
</svg>
</li>
<li>
<span aria-current="page" aria-disabled="true">مسار التنقل</span>
</li>
</ol>
</nav>
<output> المحدد: {{ rtlBreadcrumbSelection }} </output>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native navigation and list composition.
Anatomy
Root styling selector
.breadcrumb
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-current | Authored | Current item or date state. |
dir | Authored | Text and interaction direction: ltr or rtl. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native navigation and list composition. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use semantic navigation landmarks and links. Expose the current destination with aria-current and keep keyboard order consistent with visual order.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.