Guide
Components
Breadcrumbs

Breadcrumbs Component

ℹ️

Breadcrumbs is a React component designed to create customizable input fields with size and color options. It supports different icons for each breadcrumb item. It also supports responsive design. The component is fully customizable. It can be used to create breadcrumbs for any page. It is also easy to use. We follow the DaisyUI (opens in a new tab) framework's design for the breadcrumbs component.

Example Preview

Breadcrumbs Example

Usage

import { Breadcrumbs } from "@/@core";
 
// Example data for breadcrumbs
const breadcrumbsList = [
  {
    name: "Home",
    href: "/",
    icon: "tabler:brand-google-home",
  },
  {
    name: "Documents",
    href: "/documents",
    icon: "tabler:file-type-doc",
  },
  {
    name: "Add Document",
    href: "",
    icon: "tabler:file-plus",
  },
];
 
// Render Breadcrumbs component with example data
const MyPage = () => {
  return <Breadcrumbs size="md" color="primary" lists={breadcrumbsList} />;
};
 
export default MyPage;

Props

Prop nameTypeDefault valueAllowed valuesRequiredDescription
sizestring'md''sm', 'md', 'lg'NoSize of the breadcrumbs text.
colorstring'primary''primary', 'secondary', 'success', 'warning', 'error', 'info', 'ghost'NoColor of the breadcrumbs text.
listsBreadcrumbsList[][]An array of breadcrumb itemsYesAn array of breadcrumb items, where each item contains:
- name: string: The display name of the breadcrumb.
- href: string: The hyperlink of the breadcrumb. If set to an empty string (''), the breadcrumb will be non-clickable.
- icon: string: The icon associated with the breadcrumb, using the Iconify format (e.g., 'tabler:brand-google-home').
ℹ️

Note: The BreadcrumbsList type is defined as follows:

type BreadcrumbsList = {
  name: string;
  href: string;
  icon: string;
};

Example

Here is an example of using the Breadcrumbs component with some sample data:

<Breadcrumbs
  size="md"
  color="primary"
  lists={[
    {
      name: "Home",
      href: "/",
      icon: "tabler:brand-google-home",
    },
    {
      name: "Documents",
      href: "/documents",
      icon: "tabler:file-type-doc",
    },
    {
      name: "Add Document",
      href: "",
      icon: "tabler:file-plus",
    },
  ]}
/>

This will render a breadcrumbs component with three clickable breadcrumb items, each with a name, a hyperlink, and an associated icon.

ℹ️

Note: The Breadcrumbs component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Breadcrumbs component is dynamic and easy to use. It is also fully customizable.

Box ItemButton