Главная страница

На главной странице хлебные крошки не отображаются, так как это корневая страница сайта.

Каталог туров

В разделе туров показывается путь от главной страницы.

Страница тура

На странице конкретного тура показывается полный путь навигации.

Категория туров

В категориях туров показывается путь через раздел туров.

Страница бронирования

На странице бронирования показывается полный путь от конкретного тура.

Информационные страницы

Для статических страниц показывается простой путь от главной.

HTML структура

<nav aria-label="Навигация">
  <ol class="breadcrumbs-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Главная</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/tours/" class="breadcrumb-link">Туры</a>
    </li>
    <li class="breadcrumb-item breadcrumb-current">
      Симиланские острова
    </li>
  </ol>
</nav>

CSS стили

.breadcrumbs {
  background: #F8FAFB;
  padding: 15px 0;
  border-bottom: 1px solid #E5E7EB;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  list-style: none;
}

.breadcrumb-item:not(:last-child)::after {
  content: /;
  margin: 0 8px;
  color: #9CA3AF;
}

JavaScript функциональность

function generateBreadcrumbs(path) {
  const pathArray = path.split(/).filter(Boolean);
  const breadcrumbs = [{
    name: Главная,
    url: /
  }];
  
  let currentPath = ;
  pathArray.forEach(segment => {
    currentPath += / + segment;
    breadcrumbs.push({
      name: getPageTitle(segment),
      url: currentPath
    });
  });
  
  return breadcrumbs;
}