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

import { Breadcrumb, BreadcrumbItem } from "@seduo/design-system";
...
<Breadcrumb>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>Text</BreadcrumbItem>
</Breadcrumb>
...
<Breadcrumb>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem href="#">Text</BreadcrumbItem>
    <BreadcrumbItem isActive>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
`linkComponent` (only react)	`ElementType`	-	the option to change the basic Link component to another
`UNSAFE_className`	`string`	-	Wrapper custom classname

On this page