@chakra-ui/breadcrumb

Basic Breadcrumb

This code sample demonstrates how to create a basic breadcrumb navigation with three items: Home, About, and Contact. The 'isCurrentPage' prop is used to indicate the current page.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';

function BasicBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">About</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">Contact</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```

Custom Separator

This code sample shows how to customize the separator between breadcrumb items using the 'separator' prop. In this example, a ChevronRightIcon is used as the separator.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';
import { ChevronRightIcon } from '@chakra-ui/icons';

function CustomSeparatorBreadcrumb() {
  return (
    <Breadcrumb separator={<ChevronRightIcon color="gray.500" />}> 
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">About</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">Contact</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```

Breadcrumb with Icons

This code sample demonstrates how to include icons in breadcrumb items. Icons are imported from '@chakra-ui/icons' and used within the BreadcrumbLink component.

```jsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/breadcrumb';
import { HomeIcon, InfoIcon, PhoneIcon } from '@chakra-ui/icons';

function BreadcrumbWithIcons() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <HomeIcon /> Home
        </BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <InfoIcon /> About
        </BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">
          <PhoneIcon /> Contact
        </BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
```