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.

Source code

Theme

Color

Size

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';

Badge Card