<nav aria-label="Breadcrumb">
<ol class="breadcrumbs">
<li><a href="/">Главная</a></li>
<li><a href="/catalog/">Каталог</a></li>
<li><a href="/catalog/electronics/">Электроника</a></li>
<li aria-current="page">Смартфоны</li>
</ol>
</nav>

.breadcrumbs {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}

.breadcrumbs li {
display: inline;
font-size: 14px;
}

.breadcrumbs li + li:before {
content: ">";
padding: 0 8px;
color: #ccc;
}

.breadcrumbs li a {
text-decoration: none;
color: #0275d8;
}

.breadcrumbs li a:hover {
text-decoration: underline;
color: #01447e;
}

.breadcrumbs li:last-child {
color: #6c757d;
}

function generateBreadcrumbs() {
const path = window.location.pathname.split('/').filter(Boolean);
let currentPath = '';
let breadcrumbsHTML = '<li><a href="/">Главная</a></li>';

path.forEach((segment, index) => {
currentPath += `/${segment}`;

if (index === path.length – 1) {
breadcrumbsHTML += `<li aria-current="page">${formatSegment(segment)}</li>`;
} else {
breadcrumbsHTML += `<li><a href="${currentPath}/">${formatSegment(segment)}</a></li>`;
}
});

document.querySelector('.breadcrumbs').innerHTML = breadcrumbsHTML;
}

function formatSegment(segment) {
return segment
.replace(/-/g, ' ')
.replace(/\b\w/g, l => l.toUpperCase());
}

document.addEventListener('DOMContentLoaded', generateBreadcrumbs);

<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" itemprop="item"><span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/catalog/" itemprop="item"><span itemprop="name">Каталог</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/catalog/electronics/" itemprop="item"><span itemprop="name">Электроника</span></a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
<span itemprop="name">Смартфоны</span>
<meta itemprop="position" content="4" />
</li>
</ol>

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Каталог",
"item": "https://example.com/catalog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Электроника",
"item": "https://example.com/catalog/electronics/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Смартфоны"
}
]
}
</script>

.breadcrumbs {
display: flex;
flex-wrap: wrap;
padding: 8px 0;
margin: 0;
list-style: none;
}

.breadcrumbs li {
display: inline;
font-size: 14px;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Иконка домашней страницы для экономии места */
.breadcrumbs li:first-child a:before {
content: "🏠";
margin-right: 5px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.breadcrumbs li {
font-size: 12px;
max-width: 100px;
}

/* Сокращаем промежуточные элементы */
.breadcrumbs li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
display: none;
}

/* Добавляем многоточие для пропущенных элементов */
.breadcrumbs li:nth-last-child(2):before {
content: "... >";
padding: 0 8px;
color: #ccc;
}
}

/* Экстремально узкие экраны */
@media (max-width: 480px) {
.breadcrumbs {
flex-direction: column;
}

.breadcrumbs li {
max-width: 100%;
margin-bottom: 5px;
}

.breadcrumbs li + li:before {
content: "↳";
padding-right: 8px;
color: #ccc;
}
}

function adaptBreadcrumbs() {
const breadcrumbs = document.querySelectorAll('.breadcrumbs li');
const screenWidth = window.innerWidth;

// Возвращаем все элементы в видимое состояние
breadcrumbs.forEach(crumb => crumb.style.display = 'inline');

if (screenWidth < 768 && breadcrumbs.length > 4) {
// Показываем только первый, последний и предпоследний элементы
for (let i = 1; i < breadcrumbs.length – 2; i++) {
breadcrumbs[i].style.display = 'none';
}

// Добавляем многоточие
const ellipsis = document.createElement('li');
ellipsis.className = 'breadcrumb-ellipsis';
ellipsis.textContent = '...';
breadcrumbs[0].parentNode.insertBefore(ellipsis, breadcrumbs[breadcrumbs.length – 2]);

// Добавляем обработчик для раскрытия полного пути
ellipsis.addEventListener('click', () => {
breadcrumbs.forEach(crumb => crumb.style.display = 'inline');
ellipsis.remove();
});
}
}

window.addEventListener('resize', adaptBreadcrumbs);
document.addEventListener('DOMContentLoaded', adaptBreadcrumbs);

// Функция для вывода хлебных крошек
function custom_breadcrumbs() {
echo '<nav aria-label="Breadcrumb">';
echo '<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">';

// Главная страница
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
echo '<a href="' . home_url() . '" itemprop="item"><span itemprop="name">Главная</span></a>';
echo '<meta itemprop="position" content="1" /></li>';

if (is_category() || is_single()) {
// Категория
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
echo '<a href="' . get_category_link($category->term_id) . '" itemprop="item">';
echo '<span itemprop="name">' . $category->name . '</span></a>';
echo '<meta itemprop="position" content="2" /></li>';
}

// Текущая статья/страница
if (is_single()) {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">';
echo '<span itemprop="name">' . get_the_title() . '</span>';
echo '<meta itemprop="position" content="3" /></li>';
}
} else if (is_page()) {
// Если это вложенная страница
if ($post->post_parent) {
$parents = get_post_ancestors($post->ID);
$parents = array_reverse($parents);
$position = 2;

foreach ($parents as $parent) {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
echo '<a href="' . get_permalink($parent) . '" itemprop="item">';
echo '<span itemprop="name">' . get_the_title($parent) . '</span></a>';
echo '<meta itemprop="position" content="' . $position . '" /></li>';
$position++;
}
}

// Текущая страница
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">';
echo '<span itemprop="name">' . get_the_title() . '</span>';
echo '<meta itemprop="position" content="' . $position . '" /></li>';
}

echo '</ol></nav>';
}

// Вставка в тему WordPress
// <?php custom_breadcrumbs(); ?>

import React, { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Breadcrumbs.css';

const Breadcrumbs = ({ routes }) => {
const location = useLocation();
const [breadcrumbs, setBreadcrumbs] = useState([]);

useEffect(() => {
const pathnames = location.pathname.split('/').filter(x => x);
const breadcrumbsArray = [];

// Добавляем главную страницу
breadcrumbsArray.push({
name: 'Главная',
path: '/',
position: 1
});

// Формируем breadcrumbs на основе пути
let currentPath = '';
pathnames.forEach((path, index) => {
currentPath += `/${path}`;

// Ищем соответствующий маршрут для получения человекопонятного названия
const route = routes.find(r => r.path === currentPath);

breadcrumbsArray.push({
name: route ? route.name : path.charAt(0).toUpperCase() + path.slice(1),
path: currentPath,
position: index + 2
});
});

setBreadcrumbs(breadcrumbsArray);
}, [location, routes]);

if (breadcrumbs.length <= 1) return null;

return (
<nav aria-label="Breadcrumb">
<ol className="breadcrumbs" itemScope itemType="https://schema.org/BreadcrumbList">
{breadcrumbs.map((breadcrumb, index) => (
<li
key={breadcrumb.path}
itemProp="itemListElement"
itemScope
itemType="https://schema.org/ListItem"
aria-current={index === breadcrumbs.length – 1 ? "page" : undefined}
>
{index < breadcrumbs.length – 1 ? (
<Link to={breadcrumb.path} itemProp="item">
<span itemProp="name">{breadcrumb.name}</span>
</Link>
) : (
<span itemProp="name">{breadcrumb.name}</span>
)}
<meta itemProp="position" content={breadcrumb.position} />
</li>
))}
</ol>
</nav>
);
};

export default Breadcrumbs;

// Использование:
// <Breadcrumbs routes={[
// { path: '/', name: 'Главная' },
// { path: '/catalog', name: 'Каталог' },
// { path: '/catalog/electronics', name: 'Электроника' }
// ]} />

<template>
<nav aria-label="Breadcrumb" v-if="crumbs.length > 1">
<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
<li 
v-for="(crumb, index) in crumbs" 
:key="crumb.path"
itemprop="itemListElement" 
itemscope 
itemtype="https://schema.org/ListItem"
:aria-current="index === crumbs.length – 1 ? 'page' : undefined"
>
<router-link 
v-if="index < crumbs.length – 1" 
:to="crumb.path" 
itemprop="item"
>
<span itemprop="name">{{ crumb.name }}</span>
</router-link>
<span v-else itemprop="name">{{ crumb.name }}</span>
<meta itemprop="position" :content="index + 1" />
</li>
</ol>
</nav>
</template>

<script>
export default {
name: 'Breadcrumbs',
data() {
return {
crumbs: []
}
},
watch: {
$route() {
this.updateBreadcrumbs();
}
},
created() {
this.updateBreadcrumbs();
},
methods: {
updateBreadcrumbs() {
const pathArray = this.$route.path.split('/').filter(Boolean);
this.crumbs = [];

// Добавляем главную страницу
this.crumbs.push({
name: 'Главная',
path: '/'
});

// Добавляем промежуточные пути
let currentPath = '';
pathArray.forEach(segment => {
currentPath += `/${segment}`;

// Ищем маршрут, чтобы получить человекочитаемое название
const matchedRoute = this.$router.options.routes.find(
route => route.path === currentPath
);

this.crumbs.push({
name: matchedRoute ? matchedRoute.name : segment.charAt(0).toUpperCase() + segment.slice(1),
path: currentPath
});
});
}
}
}
</script>

<style scoped>
.breadcrumbs {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}

.breadcrumbs li {
display: inline;
font-size: 14px;
}

.breadcrumbs li + li:before {
content: ">";
padding: 0 8px;
color: #ccc;
}

@media (max-width: 768px) {
.breadcrumbs li {
font-size: 12px;
}
}
</style>

/**
* Реализация hook_theme_suggestions_breadcrumb_alter().
*/
function mytheme_theme_suggestions_breadcrumb_alter(array &$suggestions, array $variables) {
$suggestions[] = 'breadcrumb__custom';
}

/**
* Создание шаблона breadcrumb--custom.html.twig
*/
{# 
{% if breadcrumb %}
<nav aria-label="Breadcrumb">
<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
{% for item in breadcrumb %}
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
{% if loop.last %}aria-current="page"{% endif %}>
{% if item.url and not loop.last %}
<a href="{{ item.url }}" itemprop="item">
<span itemprop="name">{{ item.text }}</span>
</a>
{% else %}
<span itemprop="name">{{ item.text }}</span>
{% endif %}
<meta itemprop="position" content="{{ loop.index }}" />
</li>
{% endfor %}
</ol>
</nav>
{% endif %}
#}