Breadcrumbs

The Breadcrumbs component displays hierarchical navigation links to help users understand their current location within the application. Item labels and string separators each accept the full <Text> API via labelProps / separatorProps.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Hierarchy

Simple breadcrumb trail showing the current page within a product hierarchy.

Loading demo…

import

 

{

 

Breadcrumbs

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

ITEMS

 

=

 

[

  

{

label

:

 

'Home'

,

href

:

 

'/'

 

}

,

  

{

label

:

 

'Products'

,

href

:

 

'/products'

 

}

,

  

{

label

:

 

'Electronics'

,

href

:

 

'/products/electronics'

 

}

,

  

{

label

:

 

'Smartphones'

 

}

,

]

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

<Breadcrumbs

 

items

=

{

ITEMS

}

 

/>

;

}

Separators

Shows how to replace the default slash with characters or React nodes via the separator prop.

Loading demo…

import

 

{

 

Block

,

 

Breadcrumbs

,

 

Icon

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

ITEMS

 

=

 

[

  

{

label

:

 

'Home'

,

href

:

 

'/'

 

}

,

  

{

label

:

 

'Category'

,

href

:

 

'/category'

 

}

,

  

{

label

:

 

'Subcategory'

,

href

:

 

'/category/subcategory'

 

}

,

  

{

label

:

 

'Product'

 

}

,

]

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Block

>

      

<Breadcrumbs

 

items

=

{

ITEMS

}

 

/>

      

<Breadcrumbs

 

items

=

{

ITEMS

}

 

separator

=

">"

 

/>

      

<Breadcrumbs

 

items

=

{

ITEMS

}

 

separator

=

{

<Icon

 

name

=

"chevron-right"

 

size

=

{

14

}

 

/>

}

 

/>

      

<Breadcrumbs

 

items

=

{

ITEMS

}

 

separator

=

"•"

 

/>

    

</Block

>

  

)

;

}

Scan to open this page on your phonereact-ui-library.com/components/Breadcrumbs

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap