eui documentation
  1. Components
  2. EuiPageBreadcrumbComponent

File

packages/components/eui-page/components/eui-page-breadcrumb/eui-page-breadcrumb.component.ts

Description

Breadcrumb container component for eui-page that provides a navigation trail area. Displays hierarchical navigation path showing the user's location within the application structure. Typically positioned near the top of the page, above the main header or content. Should contain eui-breadcrumb component or custom breadcrumb navigation elements. Must be used as a direct child of eui-page to maintain proper layout structure.

Basic usage

Example :
<eui-page>
  <eui-page-breadcrumb>
    <eui-breadcrumb [items]="breadcrumbItems"></eui-breadcrumb>
  </eui-page-breadcrumb>
  <eui-page-content>Content here</eui-page-content>
</eui-page>

Accessibility

  • Use eui-breadcrumb component which provides proper ARIA navigation landmark
  • Ensure breadcrumb links have descriptive text for screen readers
  • Current page should be indicated with aria-current="page"

Notes

  • Must be a direct child of eui-page component
  • Typically placed before page header or content sections
  • Provides consistent spacing and alignment with page layout

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-page-breadcrumb
template 
<ng-content/>

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-page-breadcrumb'

Properties

class
Type : string
Default value : 'eui-page-breadcrumb'
Decorators :
@HostBinding()

results matching ""

    No results matching ""