lib/web/css/docs/breadcrumbs.html - 2.4-develop - githubmirror/magento2

lib/web/css/docs/breadcrumbs.html
505 строк233 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:583d4f486
<!--
/**
 * Copyright 2014 Adobe
 * All Rights Reserved.
 */
-->

<!DOCTYPE html><html><head><title>breadcrumbs | Magento UI Library
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл]
<p>  Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their location within programs, websites or documents.</p>
<p>  Breadcrumbs layout with links can be separated by any symbol, for example <code>&gt;</code> symbol.</p>
<p>  The following markup corresponds to the accesibility demands:</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-breadcrumbs-1"&gt;
      &lt;span class="label" id="breadcrumb-label"&gt;You are here:&lt;/span&gt;
      &lt;ul class="items" aria-labelledby="breadcrumb-label"&gt;
          &lt;li class="item home"&gt;
              &lt;a title="Go to Home Page" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category1"&gt;
              &lt;a title="Category" href="#"&gt;Category&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category2"&gt;
              &lt;a title="Category" href="#"&gt;Subcategory&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category3"&gt;
              &lt;strong&gt;Products&lt;/strong&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-breadcrumbs-1 {
    .lib-breadcrumbs();
}</code></pre></div></article><article id="breadcrumbs-variables" class="section"><div class="docs"><a href="#breadcrumbs-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="breadcrumbs-variables">Breadcrumbs variables</h1>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-font-size</th>
        <td>@breadcrumbs__font-size</td>
        <td class="vars_value">@font-size__s</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs font size</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-display</th>
        <td>@breadcrumbs__display</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | inline | block | inline-block</td>
        <td>Breadcrumbs links display property</td>
      </tr>
      <tr>
        <th>@_breadcrumbs__container-margin</th>
        <td>@breadcrumbs__container-margin</td>
        <td class="vars_value"> 0 0 @indent__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs items padding</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-padding</th>
        <td>@breadcrumbs__padding</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs items padding</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs - separator symbol</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-separator-symbol</th>
        <td>@breadcrumbs-separator__symbol</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | any symbol</td>
        <td>Breadcrumbs separating symbol</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-separator-color</th>
        <td>@breadcrumbs-separator__color</td>
        <td class="vars_value" nowrap="nowrap">@breadcrumbs-current__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating symbol color</td>
      </tr>
     <tr>
        <th>@_breadcrumbs-icon-use</th>
        <td>@breadcrumbs-icon__use</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs separating symbol is an icon</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-icon-font-content</th>
        <td>@breadcrumbs-icon__font-content</td>
        <td class="vars_value">@icon-next</td>
        <td class="vars_value">'' | false | icon</td>
        <td>Breadcrumbs separating icon symbol</td>
      </tr>
      <tr>
        <th>@_icon-font</th>
        <td>@breadcrumbs-icon__font</td>
        <td class="vars_value">@icon-font</td>
        <td class="vars_value">'' | false | font</td>
        <td>Breadcrumbs separating icon font</td>
      </tr>
      <tr>
        <th>@_icon-font-size</th>
        <td>@breadcrumbs-icon__font-size</td>
        <td class="vars_value">24px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon font size</td>
      </tr>
      <tr>
        <th>@_icon-font-line-height</th>
        <td>@breadcrumbs-icon__font-line-height</td>
        <td class="vars_value">18px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon line height</td>
      </tr>
      <tr>
        <th>@_icon-font-color</th>
        <td>@breadcrumbs-icon__font-color</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon color</td>
      </tr>
      <tr>
        <th>@_icon-font-margin</th>
        <td>@breadcrumbs-icon__font-margin</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon margin</td>
      </tr>
      <tr>
        <th>@_icon-font-vertical-align</th>
        <td>@breadcrumbs-icon__font-vertical-align</td>
        <td class="vars_value">top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon vertical align</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs - current page</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-color</th>
        <td>@breadcrumbs-current__color</td>
        <td class="vars_value">#a3a3a3</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-font-weight</th>
        <td>@breadcrumbs-current__font-weight</td>
        <td class="vars_value">@font-weight__regular</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page font weight</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-background</th>
        <td>@breadcrumbs-current__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-border</th>
        <td>@breadcrumbs-current__border</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient</th>
        <td>@breadcrumbs-current__gradient</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs current page have gradient background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-direction</th>
        <td>@breadcrumbs-current__gradient-direction</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | vertical | horizontal</td>
        <td>Direction of breadcrumbs current page background gradient (if there is any)</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-color-start</th>
        <td>@breadcrumbs-current__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-color-end</th>
        <td>@breadcrumbs-current__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient</th>
        <td>@breadcrumbs-link__gradient</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs items have gradient background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-direction</th>
        <td>@breadcrumbs-link__gradient-direction</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | vertical | horizontal</td>
        <td>Direction of breadcrumbs item background gradient (if there is any)</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - default</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color</th>
        <td>@breadcrumbs-link__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background</th>
        <td>@breadcrumbs-link__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border</th>
        <td>@breadcrumbs-link__border</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration</th>
        <td>@breadcrumbs-link__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start</th>
        <td>@breadcrumbs-link__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end</th>
        <td>@breadcrumbs-link__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - visited</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-visited</th>
        <td>@breadcrumbs-link__visited__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-visited</th>
        <td>@breadcrumbs-link__visited__background</td>
        <td class="vars_value">@breadcrumbs-link__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-visited</th>
        <td>@breadcrumbs-link__visited__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-visited</th>
        <td>@breadcrumbs-link__visited__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start-visited</th>
        <td>@breadcrumbs-link__visited__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-visited</th>
        <td>@breadcrumbs-link__visited__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - hover</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-hover</th>
        <td>@breadcrumbs-link__hover__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-hover</th>
        <td>@breadcrumbs-link__hover__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-hover</th>
        <td>@breadcrumbs-link__hover__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-hover</th>
        <td>@breadcrumbs-link__hover__text-decoration</td>
        <td class="vars_value">underline</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start-hover</th>
        <td>@breadcrumbs-link__hover__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-hover</th>
        <td>@breadcrumbs-link__hover__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - active</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-active</th>
        <td>@breadcrumbs-link__active__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-active</th>
        <td>@breadcrumbs-link__active__background</td>
        <td class="vars_value">@breadcrumbs-link__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-active</th>
        <td>@breadcrumbs-link__active__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-active</th>
        <td>@breadcrumbs-link__active__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active text decoration</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_breadcrumbs-link-gradient-color-start-active</th>
        <td>@breadcrumbs-link__active__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-active</th>
        <td>@breadcrumbs-link__active__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active gradient end color</td>
      </tr>
    </table>
  </pre>
</div></article><article id="buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol" class="section"><div class="docs"><a href="#buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol">Button-styled breadcrumbs with gradient background, border, and no separating symbol</h1>
<p>  Set values for the following variables to:</p>
<p>  hide separating symbol:</p>
<pre><code class="lang-css">  @_breadcrumbs-separator-symbol: &#39;&#39;</code></pre>
<p>  set up links gradient background for default and hover state:</p>
<pre><code class="lang-css">  @_breadcrumbs-link-gradient: true,
  @_breadcrumbs-link-gradient-direction: vertical,
  @_breadcrumbs-link-gradient-color-start: #f4f4f4,
  @_breadcrumbs-link-gradient-color-end: #ccc,
  @_breadcrumbs-link-gradient-color-start-hover: #ccc,
  @_breadcrumbs-link-gradient-color-end-hover: #f4f4f4</code></pre>
<p>  set up current page gradient background:</p>
<pre><code class="lang-css">  @_breadcrumbs-current-gradient: true,
  @_breadcrumbs-current-gradient-color-start: #f7b32e,
  @_breadcrumbs-current-gradient-color-end: #ff5501</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-breadcrumbs-2"&gt;
      &lt;ul class="items"&gt;
          &lt;li class="item home"&gt;
              &lt;a title="Go to Home Page" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category1"&gt;
              &lt;a title="Category" href="#"&gt;Category&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category2"&gt;
              &lt;a title="Category" href="#"&gt;Subcategory&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category3"&gt;
              &lt;strong&gt;Products&lt;/strong&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-breadcrumbs-2 {
    .lib-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-link-border: 1px solid #ccc,
        @_breadcrumbs-link-gradient: true,
        @_breadcrumbs-link-gradient-direction: vertical,
        @_breadcrumbs-link-gradient-color-start: #f4f4f4,
        @_breadcrumbs-link-gradient-color-end: #ccc,
        @_breadcrumbs-link-gradient-color-start-hover: #ccc,
        @_breadcrumbs-link-gradient-color-end-hover: #f4f4f4,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-current-color: #1979c3,
        @_breadcrumbs-current-gradient: true,
        @_breadcrumbs-current-gradient-color-start: #f7b32e,
        @_breadcrumbs-current-gradient-color-end: #ff5501,
        @_breadcrumbs-current-border: 1px solid #d04b0a
    );
}</code></pre></div></article><article id="breadcrumbs-with-solid-background" class="section"><div class="docs"><a href="#breadcrumbs-with-solid-background" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="breadcrumbs-with-solid-background">Breadcrumbs with solid background</h1>
<p>  Breadcrumbs with solid background and a triangle right on the right side, without separating symbol.</p>
<p>  Set values for the following variables to:</p>
<p>  hide separating symbol use:</p>
<pre><code class="lang-css">  @_breadcrumbs-separator-symbol: &#39;&#39;</code></pre>
<p>  set up solid background for links for default and hover state:</p>
<pre><code class="lang-css">  @_breadcrumbs-link-background: #f4f4f4,
  @_breadcrumbs-link-background-hover: #ccc</code></pre>
<p>  set up gradient background for current page:</p>
<pre><code class="lang-css">  @_breadcrumbs-current-background: #e7e7e7,
  @_breadcrumbs-current-color: #333,</code></pre>
<p>  User can also add customization that was not provided with the breadcrumbs mixin. Here we can add solid arrow right for each link:</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-breadcrumbs-3"&gt;
      &lt;ul class="items"&gt;
          &lt;li class="item home"&gt;
              &lt;a title="Go to Home Page" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category1"&gt;
              &lt;a title="Category" href="#"&gt;Category&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category2"&gt;
              &lt;a title="Category" href="#"&gt;Subcategory&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="item category3"&gt;
              &lt;strong&gt;Products&lt;/strong&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-breadcrumbs-3 {
    .lib-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-current-background: #e7e7e7,
        @_breadcrumbs-current-color: #333,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-link-background: #f4f4f4,
        @_breadcrumbs-link-background-hover: #ccc
    );
    .item a {
        position: relative;
        margin: 0 11px 0 0;
        &:after {
            .lib-arrow(right, 12px, #f4f4f4);
            content: "";
            position: absolute;
            display: block;
            top: 0;
            right: -23px;
        }
        &:hover:after {
            border-color: transparent transparent transparent #ccc;
        }
    }
}</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg vie … [Строка слишком длинная. Вы можете скачать файл]