<SpacedGroup direction="vertical">
    <Breadcrumb>
      <BreadcrumbItem icon={HomeIcon} onClick={() => console.log('Home')} />
      <BreadcrumbItem icon={ScopeIcon}>
        <a href="#">Projects
      </BreadcrumbItem>
      <BreadcrumbItem>
        <Link href="#/">Project A</Link>
      </BreadcrumbItem>
      <BreadcrumbItem icon={AssetIcon} selected>
        Selected Story
      </BreadcrumbItem>
    </Breadcrumb>
    <Breadcrumb>
      <BreadcrumbItem icon={HomeIcon} onClick={() => console.log('Home')}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem collapse>
        <a href="#">Projects</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <Link href="#/">Project A</Link>
      </BreadcrumbItem>
      <BreadcrumbItem selected>Selected Story</BreadcrumbItem>
    </Breadcrumb>
    <Breadcrumb>
      <BreadcrumbItem icon={HomeIcon} onClick={() => console.log('Home')}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem icon={ScopeIcon}>
        <a href="#">Projects</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <Link href="#/">Project A</Link>
      </BreadcrumbItem>
      <BreadcrumbItem icon={AssetIcon} selected>
        Selected Story
      </BreadcrumbItem>
    </Breadcrumb>
    <Breadcrumb separator=">">
      <BreadcrumbItem icon={HomeIcon} onClick={() => console.log('Home')}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem selected>
        <a href="#">Selected anchor</a>
      </BreadcrumbItem>
      <BreadcrumbItem selected>
        <Link href="#/">Selected Link</Link>
      </BreadcrumbItem>
      <BreadcrumbItem selected>Selected Text</BreadcrumbItem>
    </Breadcrumb>
  </SpacedGroup>
</Playground>