Skip to main content

Навігаційні стежки (Breadcrumbs)

Навігація

Навігаційні стежки

Навігаційні стежки (інколи їх називають "хлібні крихти" з англ. breadcrumbs) дозволяють користувачам відстежувати та підтримувати інформацію про своє місцезнаходження в програмі чи на вебсайті. Їх слід використовувати для великих сайтів і програм з ієрархічно впорядкованими сторінками.

Макет навігаційних стежок

Загальний макет навігаційних стежок такий:
<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item">
    <a href="/catalog/" class="link">
      Catalog
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>
Де

● breadcrumbs - основний контейнер для навігаційних стежок

○ breadcrumbs-item - один елемент навігації. Може містити будь-який вміст

○ breadcrumbs-item-active - поточний/активний елемент навігації

○ breadcrumbs-separator - значок роздільника між елементами

Макет згорнутих навігаційних стежок

Коли є багато елементів навігації, можна додати спеціальну «згорнуту» кнопку, наприклад, з Popover всередині: 
<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <!-- Collapsed button, also triggers Popover -->
  <div class="breadcrumbs-collapsed link popover-open" data-popover=".my-popover">
    <span></span>
    <!-- Popover inside of collapsed button -->
    <div class="popover my-popover">
      <div class="popover-inner">
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link item-content popover-close">
                <div class="item-inner">
                  <div class="item-title">Catalog</div>
                </div>
              </a>
            </li>
            ...
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>

Приклад 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Breadcrumbs</div>
    </div>
  </div>

  <div class="page-content">
    <div class="block-title">Basic</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Catalog
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          Phones
        </div>
      </div>
    </div>

    <div class="block-title">Scrollable</div>
    <div class="block-header">Breadcrumbs will be scrollable if they don't fit the screen</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Catalog
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Phones
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Apple
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>

    <div class="block-title">Collapsed</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-collapsed link popover-open" data-popover=".breadcrumbs-popover">
          <span></span>
          <div class="popover breadcrumbs-popover" style="width: 120px">
            <div class="popover-inner">
              <div class="list">
                <ul>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Catalog</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Phones</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Apple</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>

    <div class="block-title">With Icons</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon t4-icons if-not-md">house_fill</i>
            <i class="icon material-icons if-md">home</i>
            <span>Home</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon t4-icons if-not-md">square_list_fill</i>
            <i class="icon material-icons if-md">list_alt</i>
            <span>Catalog</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon t4-icons if-not-md">device_phone_portrait</i>
            <i class="icon material-icons if-md">smartphone</i>
            <span>Phones</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon t4-icons if-not-md">logo_apple</i>
            <i class="icon t4-icons if-md">logo_apple</i>
            <span>Apple</span>
          </a>
        </div>

        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>
  </div>

</div>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-breadcrumbs-spacing: 12px;
  --t4-breadcrumbs-padding: 2px 0;
  --t4-breadcrumbs-item-padding: 0px;
  --t4-breadcrumbs-item-bg-color: 0px;
  --t4-breadcrumbs-item-font-weight: normal;
  --t4-breadcrumbs-item-active-font-weight: 600;
  --t4-breadcrumbs-icon-size: 24px;
  --t4-breadcrumbs-item-color: rgba(0, 0, 0, 0.55);
  --t4-breadcrumbs-separator-color: rgba(0, 0, 0, 0.35);
  --t4-breadcrumbs-item-active-color: #000;
  --t4-breadcrumbs-collapsed-color: rgba(0, 0, 0, 0.75);
  --t4-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
}
:root .dark,
:root.dark {
  --t4-breadcrumbs-item-color: rgba(255, 255, 255, 0.75);
  --t4-breadcrumbs-separator-color: rgba(255, 255, 255, 0.35);
  --t4-breadcrumbs-item-active-color: #fff;
  --t4-breadcrumbs-collapsed-color: rgba(255, 255, 255, 0.75);
  --t4-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --t4-breadcrumbs-separator-icon: 'chevron_right_ios';
  --t4-breadcrumbs-font-size: 17px;
}
.md {
  --t4-breadcrumbs-separator-icon: 'chevron_right_md';
  --t4-breadcrumbs-font-size: 16px;
}
.aurora {
  --t4-breadcrumbs-separator-icon: 'chevron_right_ios';
  --t4-breadcrumbs-font-size: 16px;
}

Techno4 Framework