@nature-ui/breadcrumb
Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages.
Installation
yarn add @nature-ui/breadcrumb
# or
npm i @nature-ui/breadcrumbImport components
Nature UI exports 3 breadcrumb related components:
-
Breadcrumb: The parent container for breadcrumbs. -
BreadcrumbItem: Individual breadcrumb element containing a link and a divider. -
BreadcrumbLink: The breadcrumb link, obviously.
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
} from '@nature-ui/breadcrumb';Usage
Add isCurrent prop to the BreadcrumbItem that matches the current path. When
this prop is present, the BreadcrumbItem doesn't have a separator, and the
BreadcrumbLink has aria-current set to page.
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink href='#'>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href='#'>Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrent>
<BreadcrumbLink>Help</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>Separators
Change the separator used in the breadcrumb by passing a string, like - or any
react element (e.g. an icon)
<Breadcrumb separator='-'>
<BreadcrumbItem>
<BreadcrumbLink href='/'>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href='/about'>About</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrent>
<BreadcrumbLink href='/contact'>Contact</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>Using an icon as the separator
<Breadcrumb
spacing='8px'
separator={<Icon color='gray' name='chevron-right' />}
>
<BreadcrumbItem>
<BreadcrumbLink href='/'>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href='/about'>About</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrent>
<BreadcrumbLink href='/contact'>Contact</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>