File

packages/components/layout/eui-app/eui-app-breadcrumb/breadcrumb.component.ts

Description

Breadcrumb navigation component that displays the hierarchical path to the current page location. Automatically registers with EuiAppShellService to coordinate layout positioning within the application shell. Provides semantic navigation landmark with appropriate ARIA role for accessibility. Content is projected via ng-content allowing flexible breadcrumb item composition and custom separators.

<!-- Breadcrumb navigation in app -->
<eui-app>
  <eui-app-breadcrumb>
    <eui-breadcrumb>
      <eui-breadcrumb-item link="/" iconSvgName="home:outline" ariaLabel="Home"></eui-breadcrumb-item>
      <eui-breadcrumb-item link="/products" label="Products"></eui-breadcrumb-item>
      <eui-breadcrumb-item label="Electronics"></eui-breadcrumb-item>
    </eui-breadcrumb>
  </eui-app-breadcrumb>
</eui-app>

Accessibility

• Uses role="nav" for semantic navigation landmark
• Provides hierarchical page location context
• Breadcrumb items are keyboard accessible
• Current page (last item) typically not linked
• Screen readers announce navigation structure

Notes

• Must be used within eui-app component for proper layout integration
• Automatically registers with EuiAppShellService on init
• Typically contains eui-breadcrumb child component
• Content is projected via ng-content for flexible composition
• Positioned below header/toolbar, above main content
• Shows hierarchical path from home to current page
• Last breadcrumb item represents current page location

Implements

OnInit

<ng-content/>