Breadcrumb

A navigation component that helps users understand where they are in a website's hierarchy.

When To Use

Use the Breadcrumb component when you need to:

Show the user's current location within a hierarchical website structure
Provide navigation options to higher levels in the hierarchy
Enable quick navigation to parent or ancestor pages
Improve the website's navigability and discoverability
Support SEO by establishing the relationship between pages

Breadcrumbs are especially useful for websites with deep hierarchies, such as e-commerce sites, documentation sites, or content management systems.

Examples

Basic#

With Icons#

Custom#

Pill Style

File Explorer Style

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Badge

Small status descriptor for UI elements.

Button

An interactive element that triggers an action or event when clicked.