Руководство Bootstrap Breadcrumb

1- Breadcrumb

Breadcrumb (хлебные крошки) это навигационное меню (navigation menu) расположенное по-горизонтали, помогает пользователю представить расположение настоящей страницы, на которую они заходят. Breadcrumb обычно используется в веб сайтах с большим количеством страниц, и имеет иерархию содержания, например такие вебсайты как справочник, поисковик,...Ниже показан пример сайта использующего  Breadcrumb:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Breadcrumb</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4>Bootstrap Breadcrumb</h4>
 
         <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Tutorials</li>
         </ul>
 
         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item active" aria-current="page">Frontend</li>
         </ul>
 
         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item"><a href="#">Frontend</a></li>
            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
         </ul>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

HTML5 представил систему тегов и атрибутов поддерживающих такие устройства как Screen Reader (Скринридер для незрячих). И  Bootstrap рекомендует вам использовать его для соответствия со стандартами современного веб сайта.Тег  <nav> это один из тегов поддерживающих такие устройства как Screen Reader, когда эти устройства находят тег  <nav>, они понимают что это зона навигации (navigation area). Вы можете использовать другие теги как <div>, <span> вместо  <nav>, но нужен еще атрибут role="navigation".Это простой код, чтобы вы создали Breadcrumb, Примечание: данный код не подходит таким устройствам, как  Screen Reader:

<ul class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
   <li class="breadcrumb-item"><a href="#">Frontend</a></li>
   <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ul>

И это код создания  Breadcrumb и подходящий таким устройствам, как Screen Reader:

<!-- nav -->
 
<nav aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</nav>
 
<!-- div -->
<div role= "navigation" aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</div>

{banner_google}

2- Breadcrumb Separator

По-умолчанию  Bootstrap использует знак  / для разделения breadcrumb-item. Вы можете заменить его чем-то другим по своему желанию

.breadcrumb-item + .breadcrumb-item::before         {
   font-family: 'fontAwesome';
   content: "\f101" !important;
}

Использование   "Base64 SVG Icon":

.breadcrumb-item + .breadcrumb-item::before {
   content: url(dаta:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) !important;
}

Использование  Image Icon:

.breadcrumb-item + .breadcrumb-item::before         {
    content: url(../images/right-arrow-16.png) !important;
}