---
title: Хлебные крошки
section: layout
theme: mebelidomanet
framework: bootstrap
redesign_status: in_progress
last_updated: 2026-07-13
files:
  php_inline:
    - views/layouts/main.php:467-486
  php_partials: []
  scss:
    - src/client/breadcrumbs/index.scss
  js: []
  widgets:
    - components/BreadcrumbsMicrodata.php
  shared:
    - src/breadcrumbs/
deps_on:
  - shared/breadcrumbs-shared
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Хлебные крошки

## Назначение

Навигационная цепочка над контентом страницы. Заполняется через `$this->params['breadcrumbs']` в контроллерах/вьюхах. Главная (home link) — всегда «Интернет магазин мебели в [городе]».

Использует виджет `BreadcrumbsMicrodata` (наследник yii-овского `yii\widgets\Breadcrumbs`), который рендерит микроразметку `schema.org/BreadcrumbList`.

## Где живёт

- **HTML inline (вызов виджета)** в `views/layouts/main.php:467-486`.
- **Виджет:** `components/BreadcrumbsMicrodata.php`.
- **SCSS:** `src/client/breadcrumbs/index.scss`.
- В `src/breadcrumbs/` есть **shared** реализация — на разных темах может использоваться один Js/SCSS-модуль. Уточнять при редизайне, см. [shared/breadcrumbs-shared](../shared/breadcrumbs-shared.md).

## Bootstrap-классы

- `breadcrumb`, `breadcrumb-item`, `active` — стандартный BS-крошечный паттерн.
- Spacing: `mt-4` (на родителе).

## JS-зависимости

- Никаких.

## Редизайн мобиля (2026-07-13)

**Десктоп оставлен как есть** (стандартная BS-плашка `#f4f4f4`, radius 4px,
полная цепочка с разделителями «/») — устраивает, намеренно не трогаем.

**Мобиль (`<576`, `media-breakpoint-down(xs)`)** переработан в
`src/client/breadcrumbs/index.scss`: раньше цепочка из 4–5 крошек переносилась
на 2 строки (+ ломаная иконка-домик). Теперь вся цепочка **сворачивается в одну
ссылку «‹ …» на родительскую категорию** — предпоследнюю крошку
(`.breadcrumb-item:nth-last-child(2)`; последняя всегда `active` = текущая
страница). Механика — чистый CSS:

- `.breadcrumb-item { display: none }` + `.breadcrumb-item + …::before { content: none }` — прячем все крошки и BS-разделители;
- `.breadcrumb-item:nth-last-child(2)` — показываем (`inline-flex`), `::before { content: '‹' }` как стрелка «назад», `<a>` с `text-overflow: ellipsis`.

Полный путь **остаётся в DOM** (микроразметка `BreadcrumbList` / SEO не
страдают) — скрыт только визуально. На товаре → «‹ [категория]», на категории →
«‹ [родительская категория]». Прежний хак с `home.svg` (иконка-домик вместо
текста «Интернет магазин…») удалён.