Breadcrumb

An unstyled breadcrumb component for building navigational hierarchies with full control over layout and styling.

Build fully custom breadcrumb navigation with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Breadcrumb with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, List, Item, Link, Current, Separator, Ellipsis
Semantic HTML structure with nav > ol > li hierarchy
Current page indicator with aria-current="page"
Presentational separators hidden from the accessibility tree

Usage#

import { Breadcrumb } from 'primereact/breadcrumb';

<Breadcrumb.Root>
    <Breadcrumb.List>
        <Breadcrumb.Item>
            <Breadcrumb.Link></Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator></Breadcrumb.Separator>
        <Breadcrumb.Item>
            <Breadcrumb.Current></Breadcrumb.Current>
        </Breadcrumb.Item>
    </Breadcrumb.List>
</Breadcrumb.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Breadcrumb.Root as="div"></Breadcrumb.Root>
<Breadcrumb.Link as="button"></Breadcrumb.Link>

Default elements: Root=nav, List=ol, Item=li, Link=a, Current=span, Separator=li, Ellipsis=span.

Render Function Children#

Root accepts a render function as children, providing access to the component instance.

<Breadcrumb.Root>{(instance) => <ol>{/* custom breadcrumb items */}</ol>}</Breadcrumb.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

BreadcrumbRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`align`	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"`	—
Alignment of the content.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Specifies the orientation, valid values are 'horizontal' and 'vertical'.
`type`	`"solid"` \| `"dashed"` \| `"dotted"`	`solid`
Border style type.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"root"`

Defines passthrough(pt) options of Breadcrumb component.

label	type	description
root	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.
list	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLOListElement>>	Used to pass attributes to the list's DOM element.
item	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the item's DOM element.
separator	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the separator's DOM element.
link	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLAnchorElement>>	Used to pass attributes to the link's DOM element.
current	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the current's DOM element.
ellipsis	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the ellipsis's DOM element.

BreadcrumbList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbListInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"list"`

Defines passthrough(pt) options of BreadcrumbList component.

label	type	description
root	BreadcrumbListPassThroughType<HTMLAttributes<HTMLOListElement>>	Used to pass attributes to the root's DOM element.

BreadcrumbItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbItemInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"item"`

Defines passthrough(pt) options of BreadcrumbItem component.

label	type	description
root	BreadcrumbItemPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the root's DOM element.

BreadcrumbLink#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbLinkInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbLinkInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbLinkInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbLinkPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbLinkInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"link"`

Defines passthrough(pt) options of BreadcrumbLink component.

label	type	description
root	BreadcrumbLinkPassThroughType<HTMLAttributes<HTMLAnchorElement>>	Used to pass attributes to the root's DOM element.

BreadcrumbCurrent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbCurrentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbCurrentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbCurrentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbCurrentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbCurrentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"current"`

Defines passthrough(pt) options of BreadcrumbCurrent component.

label	type	description
root	BreadcrumbCurrentPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

BreadcrumbSeparator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbSeparatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbSeparatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbSeparatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbSeparatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbSeparatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"separator"`

Defines passthrough(pt) options of BreadcrumbSeparator component.

label	type	description
root	BreadcrumbSeparatorPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the root's DOM element.

BreadcrumbEllipsis#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: BreadcrumbEllipsisInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: BreadcrumbEllipsisInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BreadcrumbEllipsisInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<BreadcrumbEllipsisPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: BreadcrumbEllipsisInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"breadcrumb"`
`data-part`	`"ellipsis"`

Defines passthrough(pt) options of BreadcrumbEllipsis component.

label	type	description
root	BreadcrumbEllipsisPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

The root element uses nav with aria-label="Breadcrumb" to identify the navigation landmark. The list uses semantic ol > li structure. Separators have role="presentation" and aria-hidden="true" to be skipped by screen readers. The current page is marked with aria-current="page".

Keyboard Support#

Key	Function
`tab`	Moves focus through the breadcrumb links.