
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/breadcrumbs/index.mdx'

## Default Class Table
  
<CssTable name="breadcrumbs" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.breadcrumbs {
  @apply max-w-full overflow-x-auto;
}
.breadcrumbs > ul,
.breadcrumbs > ol {
  @apply flex items-center whitespace-nowrap;
  min-height: min-content;
}
.breadcrumbs > ul > li,
.breadcrumbs > ol > li {
  @apply flex items-center;
}
.breadcrumbs > ul > li > a,
.breadcrumbs > ol > li > a {
  @apply flex cursor-pointer items-center [@media(hover:hover)]:hover:underline;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.breadcrumbs {
  @apply py-2;
}
.breadcrumbs > ul > li > a:focus,
.breadcrumbs > ol > li > a:focus {
  @apply outline-none;
}
.breadcrumbs > ul > li > a:focus-visible,
.breadcrumbs > ol > li > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.breadcrumbs > ul > li + *:before,
.breadcrumbs > ol > li + *:before {
  content: "";
  border-top: 1px solid;
  border-right: 1px solid;
  background-color: transparent;
  @apply ml-2 mr-3 block h-1.5 w-1.5 rotate-45 transform opacity-40;
}

[dir="rtl"] .breadcrumbs > ul > li + *:before,
[dir="rtl"] .breadcrumbs > ol > li + *:before {
  --tw-rotate: -135deg;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



