# Breadcrumb

## Description

An individual breadcrumb item component that represents a single step in a navigation path. Works as a building block for breadcrumb trails, providing clickable navigation links with support for different states including active, disabled, and various visual styles.

## Aliases

- Breadcrumb
- BreadcrumbItem
- PathItem
- NavigationItem
- RouteItem

## Props Breakdown

**Extends:** `Omit<NavLinkProps, 'type'>`

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `selected` | `boolean` | `false` | No | Flag that defines the breadcrumb state as selected/active |
| `navLinkType` | `ButtonTypeEnum` | - | No | Defines the button type used for the breadcrumb link |
| `to` | `string \| -1` | - | No | Destination URL or path for navigation |
| `children` | `ReactNode` | - | Yes | Content of the breadcrumb item |
| `className` | `string` | - | No | Additional CSS class names |
| `disabled` | `boolean` | `false` | No | Whether the breadcrumb link is disabled |

## Examples

### Basic Usage
```tsx
import { Breadcrumb, Text } from '@delightui/components';

function BasicExample() {
  return (
    <Breadcrumb to="/dashboard">
      <Text type="BodyMedium">Dashboard</Text>
    </Breadcrumb>
  );
}
```

### Selected State
```tsx
function SelectedExample() {
  return (
    <div className="breadcrumb-trail">
      <Breadcrumb to="/home">
        <Text type="BodyMedium">Home</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      <Breadcrumb to="/products">
        <Text type="BodyMedium">Products</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      <Breadcrumb selected>
        <Text type="BodyMedium">Product Details</Text>
      </Breadcrumb>
    </div>
  );
}
```

### Different Button Types
```tsx
function ButtonTypesExample() {
  return (
    <div className="breadcrumb-types">
      <Breadcrumb to="/home" navLinkType="Filled">
        <Text type="BodyMedium">Filled</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/products" navLinkType="Outlined">
        <Text type="BodyMedium">Outlined</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/details" navLinkType="Ghost">
        <Text type="BodyMedium">Ghost</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb selected navLinkType="Text">
        <Text type="BodyMedium">Text</Text>
      </Breadcrumb>
    </div>
  );
}
```

### With Icons
```tsx
function WithIconsExample() {
  return (
    <div className="breadcrumb-with-icons">
      <Breadcrumb to="/home">
        <Icon icon="Home" size="Small" />
        <Text type="BodyMedium">Home</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/users">
        <Icon icon="Users" size="Small" />
        <Text type="BodyMedium">Users</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/profile">
        <Icon icon="Person" size="Small" />
        <Text type="BodyMedium">Profile</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb selected>
        <Icon icon="Settings" size="Small" />
        <Text type="BodyMedium">Settings</Text>
      </Breadcrumb>
    </div>
  );
}
```

### Disabled State
```tsx
function DisabledExample() {
  return (
    <div className="breadcrumb-disabled">
      <Breadcrumb to="/home">
        <Text type="BodyMedium">Home</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/category" disabled>
        <Text type="BodyMedium">Restricted Category</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb selected>
        <Text type="BodyMedium">Current Page</Text>
      </Breadcrumb>
    </div>
  );
}
```

### E-commerce Navigation
```tsx
function EcommerceExample() {
  const breadcrumbPath = [
    { label: 'Home', path: '/', icon: 'Home' },
    { label: 'Electronics', path: '/electronics', icon: 'Devices' },
    { label: 'Smartphones', path: '/electronics/smartphones', icon: 'Phone' },
    { label: 'iPhone 15 Pro', path: '/electronics/smartphones/iphone-15-pro', selected: true }
  ];

  return (
    <div className="ecommerce-breadcrumbs">
      {breadcrumbPath.map((item, index) => (
        <div key={index} className="breadcrumb-item">
          {index > 0 && <span className="breadcrumb-separator">›</span>}
          <Breadcrumb 
            to={item.path} 
            selected={item.selected}
            className="ecommerce-breadcrumb"
          >
            {item.icon && <Icon icon={item.icon} size="Small" />}
            <Text type="BodyMedium">{item.label}</Text>
          </Breadcrumb>
        </div>
      ))}
    </div>
  );
}
```

### Admin Dashboard Navigation
```tsx
function AdminDashboardExample() {
  const currentPath = '/admin/users/manage/permissions';
  const pathSegments = [
    { label: 'Dashboard', path: '/admin', icon: 'Dashboard' },
    { label: 'Users', path: '/admin/users', icon: 'Users' },
    { label: 'Manage', path: '/admin/users/manage', icon: 'Settings' },
    { label: 'Permissions', path: '/admin/users/manage/permissions', selected: true, icon: 'Security' }
  ];

  return (
    <div className="admin-breadcrumbs">
      {pathSegments.map((segment, index) => (
        <div key={index} className="admin-breadcrumb-item">
          {index > 0 && <span className="admin-separator">→</span>}
          <Breadcrumb 
            to={segment.path}
            selected={segment.selected}
            navLinkType={segment.selected ? "Filled" : "Ghost"}
            className="admin-breadcrumb"
          >
            <Icon icon={segment.icon} size="Small" />
            <Text type="BodyMedium">{segment.label}</Text>
            {segment.selected && <Chip size="Small" style="A">Current</Chip>}
          </Breadcrumb>
        </div>
      ))}
    </div>
  );
}
```

### File System Navigation
```tsx
function FileSystemExample() {
  const filePath = '/documents/projects/website/assets/images/logo.png';
  const pathParts = filePath.split('/').filter(Boolean);
  
  return (
    <div className="file-system-breadcrumbs">
      <Breadcrumb to="/">
        <Icon icon="Folder" size="Small" />
        <Text type="BodyMedium">Root</Text>
      </Breadcrumb>
      
      {pathParts.map((part, index) => {
        const isLast = index === pathParts.length - 1;
        const fullPath = '/' + pathParts.slice(0, index + 1).join('/');
        const isFile = isLast && part.includes('.');
        
        return (
          <div key={index} className="file-breadcrumb-item">
            <span className="file-separator">/</span>
            <Breadcrumb 
              to={fullPath}
              selected={isLast}
              className="file-breadcrumb"
            >
              <Icon 
                icon={isFile ? "InsertDriveFile" : "Folder"} 
                size="Small" 
              />
              <Text type="BodyMedium">{part}</Text>
              {isFile && <Chip size="Small" style="B">PNG</Chip>}
            </Breadcrumb>
          </div>
        );
      })}
    </div>
  );
}
```

### Multi-level Categories
```tsx
function MultiLevelExample() {
  const categories = [
    { id: 1, name: 'Technology', path: '/tech', level: 0 },
    { id: 2, name: 'Web Development', path: '/tech/web-dev', level: 1 },
    { id: 3, name: 'Frontend', path: '/tech/web-dev/frontend', level: 2 },
    { id: 4, name: 'React', path: '/tech/web-dev/frontend/react', level: 3, selected: true }
  ];

  return (
    <div className="multi-level-breadcrumbs">
      {categories.map((category, index) => (
        <div key={category.id} className="category-breadcrumb-item">
          {index > 0 && <span className="category-separator">•</span>}
          <Breadcrumb 
            to={category.path}
            selected={category.selected}
            navLinkType={category.level === 0 ? "Filled" : "Ghost"}
            className={`category-breadcrumb level-${category.level}`}
          >
            <Text 
              type={category.level === 0 ? "Heading6" : "BodyMedium"}
              className={`category-text level-${category.level}`}
            >
              {category.name}
            </Text>
            {category.selected && (
              <Icon icon="CheckCircle" size="Small" />
            )}
          </Breadcrumb>
        </div>
      ))}
    </div>
  );
}
```

### Interactive Breadcrumb with Dropdown
```tsx
function InteractiveExample() {
  const [showOptions, setShowOptions] = useState(false);
  const siblingPages = [
    { name: 'Overview', path: '/project/overview' },
    { name: 'Timeline', path: '/project/timeline' },
    { name: 'Team', path: '/project/team' },
    { name: 'Files', path: '/project/files' }
  ];

  return (
    <div className="interactive-breadcrumbs">
      <Breadcrumb to="/home">
        <Icon icon="Home" size="Small" />
        <Text type="BodyMedium">Home</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <Breadcrumb to="/projects">
        <Text type="BodyMedium">Projects</Text>
      </Breadcrumb>
      <span className="breadcrumb-separator">/</span>
      
      <div className="breadcrumb-dropdown">
        <Breadcrumb 
          selected
          onClick={() => setShowOptions(!showOptions)}
          className="dropdown-breadcrumb"
        >
          <Text type="BodyMedium">Website Redesign</Text>
          <Icon icon="ExpandMore" size="Small" />
        </Breadcrumb>
        
        {showOptions && (
          <div className="breadcrumb-options">
            {siblingPages.map((page, index) => (
              <Breadcrumb 
                key={index}
                to={page.path}
                className="dropdown-option"
              >
                <Text type="BodySmall">{page.name}</Text>
              </Breadcrumb>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
```

### Responsive Breadcrumbs
```tsx
function ResponsiveExample() {
  const [showAll, setShowAll] = useState(false);
  const breadcrumbItems = [
    { label: 'Home', path: '/' },
    { label: 'Products', path: '/products' },
    { label: 'Electronics', path: '/products/electronics' },
    { label: 'Computers', path: '/products/electronics/computers' },
    { label: 'Laptops', path: '/products/electronics/computers/laptops' },
    { label: 'Gaming Laptops', path: '/products/electronics/computers/laptops/gaming', selected: true }
  ];

  const visibleItems = showAll ? breadcrumbItems : [
    breadcrumbItems[0],
    ...breadcrumbItems.slice(-2)
  ];

  return (
    <div className="responsive-breadcrumbs">
      {!showAll && breadcrumbItems.length > 3 && (
        <>
          <Breadcrumb to={breadcrumbItems[0].path}>
            <Text type="BodyMedium">{breadcrumbItems[0].label}</Text>
          </Breadcrumb>
          <span className="breadcrumb-separator">/</span>
          <Breadcrumb 
            onClick={() => setShowAll(true)}
            className="breadcrumb-ellipsis"
          >
            <Text type="BodyMedium">...</Text>
          </Breadcrumb>
          <span className="breadcrumb-separator">/</span>
        </>
      )}
      
      {(showAll ? breadcrumbItems : breadcrumbItems.slice(-2)).map((item, index, array) => (
        <div key={index} className="responsive-breadcrumb-item">
          {index > 0 && <span className="breadcrumb-separator">/</span>}
          <Breadcrumb 
            to={item.path}
            selected={item.selected}
          >
            <Text type="BodyMedium">{item.label}</Text>
          </Breadcrumb>
        </div>
      ))}
      
      {showAll && (
        <Button 
          size="Small" 
          type="Ghost" 
          onClick={() => setShowAll(false)}
          className="collapse-breadcrumbs"
        >
          <Icon icon="ExpandLess" size="Small" />
        </Button>
      )}
    </div>
  );
}
```