useBreadcrumb

Usage#

import { useBreadcrumb } from '@primereact/headless/breadcrumb';
 
const { rootProps, separatorProps, ellipsisProps } = useBreadcrumb();
 
return (
    <nav {...rootProps}>
        <ol>
            <li></li>
            <li {...separatorProps}></li>
        </ol>
    </nav>
);

useBreadcrumb provides semantic ARIA attributes for navigation, separators, and ellipsis elements — see Primitive for a component-based API.

Features#

• Returns spread-ready rootProps with aria-label="Breadcrumb" for the nav element
• Provides separatorProps with role="presentation" and aria-hidden for visual-only separators
• Provides ellipsisProps with role="presentation" and aria-hidden for collapsed items

Behavior#

Separator#

Spread separatorProps on separator elements to mark them as presentational. Screen readers skip these elements.

const { separatorProps } = useBreadcrumb();
 
<li {...separatorProps}>
    <ChevronRight />
</li>;

Ellipsis#

Spread ellipsisProps on collapsed breadcrumb indicators. Like separators, these are hidden from the accessibility tree.

const { ellipsisProps } = useBreadcrumb();
 
<span {...ellipsisProps}>...</span>;

Current Page#

Mark the current page with aria-current="page" on the last item. This is not provided by the hook — apply it directly.

<span aria-current="page">Laptops</span>

Custom Styling with Data Attributes#

The prop objects include data-scope="breadcrumb" and data-part for styling.

[data-scope='breadcrumb'][data-part='root'] {
    padding: 0.75rem 1rem;
}
 
[data-scope='breadcrumb'][data-part='separator'] {
    color: rgba(0, 0, 0, 0.3);
}

API#

useBreadcrumb#

Accessibility#

See Breadcrumb Primitive for WAI-ARIA compliance details and keyboard support.