Breadcrumb

Introduction

The breadcrumb component can be used to indicate the current page's location within a navigational hierarchy and you can choose from multiple examples, colors, and sizes built with React and based on the utility classes from Tailwind CSS.

To start using the breadcrumb component you need to import it from pol-ui:

import { Breadcrumb } from "pol-ui";

Default breadcrumb

Use the <Breadcrumb> component and the child <BreadcrumbItem> components to create and indicate a series of page structure and URLs to help the user navigate through the website.

You can use the href prop from React to make the breadcrumb items clickable and the icon prop to add an icon to the breadcrumb item such as for the homepage.

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import { TbHome, TbUser } from "react-icons/tb";
 
import React from "react";
const BreadcrumbComponent = () => {
  return (
    <Breadcrumb {...args}>
      <BreadcrumbItem href="https://polgubau.com/" icon={TbHome}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="https://polgubau.com/" icon={TbUser}>
        Authors
      </BreadcrumbItem>
      <BreadcrumbItem>Pol Gubau Amores</BreadcrumbItem>
    </Breadcrumb>
  );
};
export default BreadcrumbComponent;

Props

Breadcrumb

BreadcrumbItem

With custom classes

As a part of the Pol-UI library, the banner component supports all the colors from the design system to match your brand identity and provide a consistent user experience.

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import { TbHome, TbUser } from "react-icons/tb";
 
import React from "react";
const BreadcrumbComponent = () => {
  return (
    <Breadcrumb className="bg-primary-400 w-fit py-2 px-4 rounded-xl">
      <BreadcrumbItem href="https://polgubau.com/" icon={TbHome}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="https://polgubau.com/" icon={TbUser}>
        Authors
      </BreadcrumbItem>
      <BreadcrumbItem>Pol Gubau Amores</BreadcrumbItem>
    </Breadcrumb>
  );
};
export default BreadcrumbComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

General Theme

This is the structure of the theme applied to the breadcrumb components. To make easier the appliance of the theme, both the parent and the children components have their own 'sub-theme' to apply the styles.

interface BreadcrumbTheme {
  root: BreadcrumbRootTheme;
  item: BreadcrumbItemTheme;
}

Breadcrumb

When using the theme prop from the <Breadcrumb> component, you can apply the following theme: This is done to avoid passing a <BreadcrumbItem> theme to the parent.

interface interface BreadcrumbRootTheme {
  base: string
  list: string
}

BreadcrumbItem

When using the theme prop from the <BreadcrumbItem> component, you can apply the following theme:

interface BreadcrumbItemTheme {
  base: string;
  chevron: string;
  href: IBoolean;
  icon: string;
}