Breadcrumb
This topic describes the anatomy, API reference, and variations of the Breadcrumb primitive component.
Anatomy
import { Breadcrumb } from '@sitecore-search/ui';
const MyBreadcrumbComponent = () => (
<Breadcrumb.Root>
<Breadcrumb.Navigation>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="#">
Item 1
</Breadcrumb.Link>
<Breadcrumb.Separator value="/"></Breadcrumb.Separator>
</Breadcrumb.Item>
<Breadcrumb.Item>
<Breadcrumb.Link aria-current='page' href="#">
Item 2
</Breadcrumb.Link>
</Breadcrumb.Item>
</Breadcrumb.List>
<Breadcrumb.Navigation>
</Breadcrumb.Root>
);Using the component
The following tabs describe use of theBreadcrumb primitive component.
Plain component
() => {
return (
<Breadcrumb.Root>
<Breadcrumb.Navigation>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
Item 1
</Breadcrumb.Link>
<Breadcrumb.Separator></Breadcrumb.Separator>
</Breadcrumb.Item>
<Breadcrumb.Item>
<Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
Item 2
</Breadcrumb.Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Navigation>
</Breadcrumb.Root>
);
}API reference
Breadcrumb.Root
The Breadcrumb.Root component contains all the breadcrumbs.
Children: Breadcrumb.Navigation
|
Name |
Description |
|---|---|
|
|
The article object |
Breadcrumb.Navigation
The Breadcrumb.Navigation component represents the nav HTML element. A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Parent: Breadcrumb.Root
Children: Breadcrumb.List
Breadcrumb.List
The Breadcrumb.List component is an ol(ordered list) HTML element.
Parent: Breadcrumb.Root
Children: Breadcrumb.Item
Breadcrumb.Item
The Breadcrumb.Item component lists an item's content using links and separators.
Parent: Breadcrumb.List
Children: Breadcrumb.Link and Breadcrumb.Separator.
Breadcrumb.Link
The Breadcrumb.Link component is an anchor HTML element.
Parent: Breadcrumb.Item
Breadcrumb.Separator
The Breadcrumb.Separator component separates breadcrumb items. It is an empty element by default. The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.
Parent: Breadcrumb.Item
|
Name |
Description |
|---|---|
|
|
String value of the separator. |
API reference
Breadcrumb.Root
The Breadcrumb.Root component contains all the breadcrumbs.
Children: Breadcrumb.Navigation
Breadcrumb.Navigation
The Breadcrumb.Navigation component represents nav HTML element. A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Parent: Breadcrumb.Root
Children: Breadcrumb.List
Breadcrumb.List
The Breadcrumb.List component is an ol(ordered list) HTML element.
Parent: Breadcrumb.Root
Children: Breadcrumb.Item
Breadcrumb.Item
The Breadcrumb.Item component lists an item's content using links and separators.
Parent: Breadcrumb.List
Children: Breadcrumb.Link, and Breadcrumb.Separator
Breadcrumb.Link
The Breadcrumb.Link component is an anchor HTML element.
Parent: Breadcrumb.Item
Breadcrumb.Separator
The Breadcrumb.Separator component separates breadcrumb items. It is an empty element by default. The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.
Parent: Breadcrumb.Item
|
Name |
Description |
|---|---|
|
value |
Value of the separator. |