Breadcrumb

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Examples

examples

<Breadcrumb>
  <BreadcrumbItem isActive position={1}>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
  <BreadcrumbItem href="#" position={1}>Text</BreadcrumbItem>
  <BreadcrumbItem isActive position={2}>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
  <BreadcrumbItem href="#" position={1}>Text</BreadcrumbItem>
  <BreadcrumbItem href="#" position={2}>Text</BreadcrumbItem>
  <BreadcrumbItem isActive position={3}>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
  <BreadcrumbItem href="#" position={1}>Text</BreadcrumbItem>
  <BreadcrumbItem href="#" position={2}>Text</BreadcrumbItem>
  <BreadcrumbItem href="#" position={3}>Text</BreadcrumbItem>
  <BreadcrumbItem isActive position={4}>Text</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb>
    <BreadcrumbItem isActive position="1">Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#" position="1">Text</BreadcrumbItem>
    <BreadcrumbItem isActive position="2">Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#" position="1">Text</BreadcrumbItem>
    <BreadcrumbItem href="#" position="2">Text</BreadcrumbItem>
    <BreadcrumbItem isActive position="3">Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#" position="1">Text</BreadcrumbItem>
    <BreadcrumbItem href="#" position="2">Text</BreadcrumbItem>
    <BreadcrumbItem href="#" position="3">Text</BreadcrumbItem>
    <BreadcrumbItem isActive position="4">Text</BreadcrumbItem>
</Breadcrumb>

API

Prop name	Type	Default	Description
`UNSAFE_className`	`string`	-	Wrapper custom classname

BreadcrumbItem properties

Prop name	Type	Default	Description
`href`	`string`	-	Specifies breadcrumb item link
`isActive`	`bool`	-	Specifies last item in breadcrumb list
`position`	`number`	-	Specifies the position of an item in breadcrumb list
`linkComponent` (only react)	`ElementType`	-	the option to change the basic Link component to another
`UNSAFE_className`	`string`	-	Wrapper custom classname

On this page