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

PropTypeDescriptionDefault
colorBreadcrumbsColorSets the breadcrumbs colorgray
separatorReactNodeSets the breadcrumbs separator/
sizeBreadcrumbsSizeSets the breadcrumbs sizemd

Types

type BreadcrumbsColor = 'gray' | 'slate' | 'zinc';
type BreadcrumbsSize = 'sm' | 'base' | 'md' | 'lg';