# Component/Breadcrumb

> Props: component-breadcrumb.props.txt

## Examples


### Base

```tsx
{
  render: () => {
    return <Breadcrumb items={[{
      label: '홈'
    }, {
      label: '메뉴명'
    }, {
      label: '메뉴명'
    }, {
      label: '메뉴명'
    }]} />;
  }
}
```

### Custom Link

```tsx
{
  render: () => {
    return <Breadcrumb items={[{
      label: <IconHome />
    }, {
      label: <a href='https://google.com/' target='_blank' rel='noreferrer'>
                메뉴명
              </a>
    }, {
      label: '메뉴명',
      href: '/'
    }, {
      label: '메뉴명'
    }]} />;
  }
}
```

### Disabled

```tsx
{
  render: () => {
    return <Breadcrumb items={[{
      label: '홈'
    }, {
      label: '메뉴명',
      disabled: true
    }, {
      label: '메뉴명'
    }, {
      label: '메뉴명'
    }]} />;
  }
}
```

### Only Icon

```tsx
{
  render: () => {
    return <Breadcrumb items={[...[{
      icon: <IconHome />,
      href
    }], ...items]} />;
  }
}
```

### Selected Item

```tsx
{
  render: () => {
    return <Breadcrumb items={[{
      label: '홈'
    }, {
      label: '메뉴명'
    }, {
      label: '메뉴명',
      selected: true
    }, {
      label: '메뉴명'
    }]} />;
  }
}
```

### With Icon

```tsx
{
  render: () => {
    return <Breadcrumb items={[...[{
      label: '홈',
      icon: <IconHome />,
      href
    }], ...items]} />;
  }
}
```

### With Link

```tsx
{
  render: () => {
    return <Breadcrumb items={[...[{
      label: '홈',
      href
    }], ...items]} />;
  }
}
```