Skip to main content

面包屑导航(Breadcrumbs)

尺寸#

默认(Normal)#


<nav aria-label="breadcrumbs">
<ul class="breadcrumbs">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Infima
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Docs
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Component
</a>
</li>
<li class="breadcrumbs__item breadcrumbs__item--active">
<a class="breadcrumbs__link" href="#url">
Breadcrumb
</a>
</li>
</ul>
</nav>

小(Small)#


<nav aria-label="breadcrumbs">
<ul class="breadcrumbs breadcrumbs--sm">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Infima
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Docs
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Component
</a>
</li>
<li class="breadcrumbs__item breadcrumbs__item--active">
<a class="breadcrumbs__link" href="#url">
Breadcrumb
</a>
</li>
</ul>
</nav>

大(Large)#


<nav aria-label="breadcrumbs">
<ul class="breadcrumbs breadcrumbs--lg">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Infima
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Docs
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#url">
Component
</a>
</li>
<li class="breadcrumbs__item breadcrumbs__item--active">
<a class="breadcrumbs__link" href="#url">
Breadcrumb
</a>
</li>
</ul>
</nav>