Breadcrumbs
A quick hierarchical navigation list.
The Breadcrumbs component is a navigational tool that displays a user's current location within a hierarchical structure as clickable links, aiding in easy navigation and backtracking.
import { Breadcrumbs } from '@rewind-ui/core';
function App() {
return (
<Breadcrumbs>
<Breadcrumbs.Item href="#"><Home /></Breadcrumbs.Item>
<Breadcrumbs.Item href="#">Settings</Breadcrumbs.Item>
<Breadcrumbs.Item href="#">Users</Breadcrumbs.Item>
<Breadcrumbs.Item>Update</Breadcrumbs.Item>
</Breadcrumbs>
);
}
Import
Import the Breadcrumbs
component using the following import statement.
import { Breadcrumbs } from '@rewind-ui/core';
Colors
The Breadcrumbs
component comes with three colors: gray
, zinc
and slate
.
<View>
<Breadcrumbs color="gray">
// ...
</Breadcrumbs>
<Breadcrumbs color="zinc">
// ...
</Breadcrumbs>
<Breadcrumbs color="slate">
// ...
</Breadcrumbs>
</View>
Sizes
Available size
values are: sm
, base
, md
and lg
.
<View>
<Breadcrumbs size="sm">
// ...
</Breadcrumbs>
<Breadcrumbs size="base">
// ...
</Breadcrumbs>
<Breadcrumbs size="md">
// ...
</Breadcrumbs>
<Breadcrumbs size="lg">
// ...
</Breadcrumbs>
</View>
Separator
The separator
prop allows you to customize the separator between the breadcrumbs.
<View>
<Breadcrumbs separator="-">
// ...
</Breadcrumbs>
<Breadcrumbs separator={<span className="block w-1 h-1 rounded-full bg-gray-400" />}>
// ...
</Breadcrumbs>
</View>
API Reference
Properties
Prop | Type | Description | Default |
---|---|---|---|
color | BreadcrumbsColor | Sets the breadcrumbs color | gray |
separator | ReactNode | Sets the breadcrumbs separator | / |
size | BreadcrumbsSize | Sets the breadcrumbs size | md |
Types
type BreadcrumbsColor = 'gray' | 'slate' | 'zinc';
type BreadcrumbsSize = 'sm' | 'base' | 'md' | 'lg';