Breadcrumbs

The RhBreadCrumbs is the main component that wraps a set of RhBreadCrumbsItem components to create a breadcrumb trail.

Usage

Once installed, you can import the RhBreadCrumbs and RhBreadCrumbsItem components into your React application:

copy

import {RhBreadCrumbs, RhBreadCrumbsItem } from "@rhythm-ui/react"

Then, you can use the RhBreadCrumbs and RhBreadCrumbsItem component in your JSX code:

Regular

The breadcrumb navigation links with a style specified by the variant prop. If variant is set to regular, the breadcrumbs will have a default style.

copy

<RhBreadCrumbs variant="regular" className="text-gray-500">
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>

Breadcrumbs Props

Name	Type	Default	Description
variant	"regular" \| "condensed"	regular	Set the breadcrumb variant.
theme	"solid" \| "regular"	regular	Set a theme for breadcrumb
separator	React.ReactNode		Change the separator icon for Breadcrumb
block	boolean		Sets whether the breadcrumb holds the full width or not
children	React.ReactNode[]		Provide custom component to BreadcrumbItem

BreadCrumbs Item Props

Name	Type	Description
icon	React.ReactNode	Change icon of BreadcrumbItem
label	React.ReactNode	Change the text displayed on BreadcrumbItem
children	React.ReactNode	Provide custom component to BreadcrumbItem
onClick	(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	onClick handler of BreadcrumbItem
className	string	Use this to override BreadcrumbItem's styles using custom classes

Condensed

By passing the props value condensed to the component, the display of the breadcrumbs is optimized for conserving space on the screen or page, with smaller font sizes and reduced spacing between the individual items in the trail.

copy

<RhBreadCrumbs
  theme="regular"
  variant="condensed"
  key="condensed"
  className="text-gray-500"
  block={false}
>
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>

Solid

The theme prop likely determines the visual style of the breadcrumbs. By passing solid as the value of the prop, you should be indicating that the breadcrumbs should have a uniform, opaque appearance with no transparency or gradient effect.

copy

<RhBreadCrumbs
  theme="solid"
  variant="regular"
  key="regular"
  className="text-gray-500"
  block={false}
>
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>

Solid and Condensed

The theme prop appears to control the overall visual style of the breadcrumbs and includes Solid. the variant prop can be used to adjust the size or spacing of the breadcrumb trail, with options like Full Width potentially expanding the breadcrumbs to fill the available space in their container.

copy

<RhBreadCrumbs
  theme="solid"
  variant="condensed"
  key="condensed"
  className="text-gray-500"
  block={false}
>
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>

Full Width

The block prop likely determines whether the breadcrumbs should take up the full width of their container or not. By passing a boolean value (either true or false) to the prop, you can control whether the breadcrumbs should stretch to fill the entire width of their container or stay within a smaller space.

copy

<RhBreadCrumbs
  theme="solid"
  variant="regular"
  key="regular"
  className="text-gray-500"
  block={true}
>
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>

Dropdown

The dropdown component could be used to allow users to jump directly to a specific section or page within the website or application, rather than having to navigate through the entire breadcrumb trail.

copy

function Dropdown() {
  function UsersDropdown() {
    const [searchTerm, setSearchTerm] = useState("");
    const users = [
      { name: "John Doe", img: "https://mui.com/static/images/avatar/1.jpg" },
      {
        name: "Arthur Morgan",
        img: "https://mui.com/static/images/avatar/2.jpg",
      },
      {
        name: "Mary Jane",
        img: "https://mui.com/static/images/avatar/3.jpg",
      },
    ];
    return (
      <RhPopover placement="bottom">
        <RhPopoverToggle>
          <button className="flex gap-2 items-center">
            <RhIcon icon="heroicons:user-solid" className="text-gray-400" />
            Users
          </button>
        </RhPopoverToggle>
        <RhPopoverMenu>
          <RhListContainer className="mt-2 bg-white border shadow">
            <RhListItem>
              <RhInput
                autoFocus
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search for a user..."
                prefix={<RhIcon icon="heroicons:magnifying-glass" />}
              />
            </RhListItem>
            <RhDivider />
            {users
              .filter((el) =>
                searchTerm
                  ? el.name.toLowerCase().includes(searchTerm.toLowerCase())
                  : true
              )
              .map((user, i) => (
                <RhListItem
                  key={i}
                  onClick={() => console.debug("item clicked..")}
                >
                  <RhListItemIcon variant="primary">
                    <RhAvatar size="small" type="image" value={user.img} />
                  </RhListItemIcon>
                  <RhListItemText primary={user.name} />
                </RhListItem>
              ))}
          </RhListContainer>
        </RhPopoverMenu>
      </RhPopover>
    );
  }
  return (
    <RhBreadCrumbs
      theme="regular"
      variant="regular"
      key="regular"
      block={false}
      className="text-gray-500"
    >
      <RhBreadCrumbsItem
        icon={
          <RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />
        }
      />
      <RhBreadCrumbsItem
        icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
        label="Contact"
      />
      <RhBreadCrumbsItem
        icon={
          <RhIcon
            icon="heroicons:calendar-days-solid"
            className="text-gray-400"
          />
        }
        label="Calendar"
      />
      <RhBreadCrumbsItem>
        <UsersDropdown />
      </RhBreadCrumbsItem>
    </RhBreadCrumbs>
  );
}

Seperator

The separator prop can be set to the icon to use an icon as the separator between breadcrumb links.

copy

<RhBreadCrumbs
  theme="regular"
  variant="regular"
  key="regular"
  className="text-gray-500"
  block={false}
  separator={<RhIcon icon="bi:slash-lg" />}
>
  <RhBreadCrumbsItem
    icon={<RhIcon icon="heroicons:home-20-solid" className="text-gray-400" />}
    label="Home"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:contact" className="text-gray-400" />}
    label="Contact"
  />
  <RhBreadCrumbsItem
    icon={
      <RhIcon icon="heroicons:calendar-days-solid" className="text-gray-400" />
    }
    label="Calendar"
  />
  <RhBreadCrumbsItem
    icon={<RhIcon icon="bxs:note" className="text-gray-400" />}
    label="Notes"
  />
</RhBreadCrumbs>