Breadcrumb Showcase

Introduction

The Breadcrumb component is a navigation aid that helps users understand their current location within the site’s hierarchy. Below are examples demonstrating different breadcrumb configurations.

Usage Examples

<Breadcrumb items={[
  { label: 'Home', href: '/', icon: <FaHome /> },
  { label: 'Projects', href: '/projects', icon: <FaFolder /> },
  { label: 'Project X', href: '/projects/x' },
  { label: 'Details' }
]} separator={<FaChevronRight />} />

<Breadcrumb items={[
  { label: 'Home', href: '/', icon: <FaHome /> },
  { label: 'Projects', href: '/projects', icon: <FaFolder /> },
  { label: 'Project X', href: '/projects/x' },
  { label: 'Details' }
]} separator={/} />

<Breadcrumb items={[
  { label: 'Home', href: '/', icon: <FaHome /> },
  { label: 'Projects', href: '/projects', icon: <FaFolder /> },
  { label: 'Project X', href: '/projects/x' },
  { label: 'Details' }
]} separator={>} />