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>