Как спроектировать хлебные крошки и показать место страницы

Хлебные крошки показывают место страницы в структуре сайта и дают ссылки на родительские разделы. Проверьте порядок, подписи и переходы на телефоне.

Что должно получиться

Открыв внутреннюю страницу напрямую, посетитель понимает, к какому разделу она относится и куда перейти на уровень выше. Путь не зависит от случайной последовательности кликов. Каждая родительская ссылка открывает ожидаемый список, а текущая страница не выглядит ещё одним неизвестным переходом.

Дальше рассматривается цепочка по иерархии сайта. История посещений и шаги заполнения формы решают другие задачи. Не смешивайте их в одном ряду: возврат к предыдущему экрану и переход в родительскую рубрику могут вести в разные места.

Такая навигация особенно полезна в глубоком каталоге, базе знаний или наборе рубрик. На плоском сайте с несколькими очевидными страницами дополнительная цепочка может не помогать. Начните с внутренних экранов, на которых человеку действительно трудно определить своё место.

Из чего это складывается

Количество сегментов не должно определяться числом папок в адресе. Техническая структура URL и понятная посетителю иерархия могут отличаться. Выбирайте путь, который соответствует устройству материалов, и проверяйте реальные назначения ссылок.

Как это сделать по шагам

1. Выберите характерные внутренние страницы. Возьмите короткое и длинное название, глубокую ветку и материал, который относится к нескольким рубрикам. Запишите, где человеку нужно оказаться на уровне выше.
2. Составьте родительский путь. Расположите существующие уровни от общего к частному. Уберите декоративные сегменты, которые ничего не открывают и не помогают понять структуру.
3. Определите правило для нескольких рубрик. Выберите устойчивую основную ветку либо понятное правило контекста. Оно должно работать при прямом входе и повторном открытии страницы.
4. Согласуйте подписи и адреса. Название сегмента должно обещать то, что человек увидит после перехода. Используйте фактические адреса родительских страниц.
5. Обозначьте текущую страницу. Решите, нужна ли она последним сегментом или её достаточно показать соседним заголовком. Если текущий элемент является ссылкой, укажите его состояние в доступной разметке.
6. Подготовьте узкий вариант. Проверьте переносы, длинные подписи и возможность нажать нужную ссылку. Если цепочка сокращается, сохраните понятный переход к ближайшему родителю.
7. Проверьте управление. Пройдите ссылки клавиатурой и касанием. Убедитесь, что разделители не получают фокус, а назначение навигационной области понятно.
8. Проверьте опубликованные страницы. Откройте их напрямую и через разные списки, затем повторите переходы после изменения рубрики. Зафиксируйте правило для будущих материалов.

Как выбрать правильный родительский путь

В учебном каталоге последовательность может выглядеть так: главная страница, каталог, освещение, настольные лампы, конкретная модель. Это пример содержания, а не требование добавить такие разделы на любой сайт. Каждый родитель должен объединять текущий материал с подходящими соседями.

Проверьте промежуточные уровни. Если ссылка с названием категории ведёт в общий поиск без нужного ограничения, обещание цепочки не выполнено. Посетитель ожидает подходящий список, а не случайный набор материалов. Исправьте адрес либо название и назначение уровня.

Не создавайте фиктивную страницу только ради красивой длины пути. Если уровень нужен структуре, у него должно быть полезное содержание и понятный список. Если нет, рассмотрите более короткую иерархию. Цепочка должна помогать ориентироваться, а не изображать глубину.

Фильтр, сортировка и временный результат выбора не всегда являются родительским уровнем. Например, порядок по цене меняет показ списка, но не обязательно создаёт новую рубрику. Отделите устойчивую структуру от состояния интерфейса.

Что делать с несколькими рубриками

Один материал может относиться к двум веткам. Сначала решите, какая из них считается основной для показа цепочки. Это особенно важно, если страница открывается из внешней ссылки: у посетителя нет предыдущего списка, из которого можно было бы восстановить контекст.

Возможен и контекстный вариант, когда путь учитывает осмысленный вход из раздела. Но тогда нужно отдельное правило для прямого открытия, обновления и передачи ссылки другому человеку. Не стройте цепочку только из случайного значения истории браузера.

Проверьте, что контекст не меняет сами назначения сегментов непредсказуемо. Одинаковая подпись не должна вести в разные несвязанные места без понятной причины. Если несколько веток важны одновременно, дополнительные переходы можно показать рядом отдельным способом, не смешивая два пути в одну последовательность.

Для CMS запишите, откуда берётся основная рубрика и кто может её менять. После переноса материала проверьте внешний текст цепочки и ссылки. Старое название с новым адресом или новый текст со старым адресом одинаково мешают ориентироваться.

Названия, текущая страница и разделители

Используйте названия, которые человек узнает в открывшемся разделе. Длинный внутренний термин удобен редактору, но не обязательно понятен посетителю. Сокращение допустимо, когда сохраняет смысл и не превращает несколько разных рубрик в одинаковые подписи.

Текущую страницу можно показать обычным текстом в конце пути. Если она остаётся ссылкой, атрибут aria-current='page' помогает обозначить её как текущую для вспомогательных технологий. У простого текста это состояние не обязательно: важнее согласованная структура и понятное представление.

Не отмечайте родительскую категорию как текущую страницу, если открыта вложенная статья. Она действительно относится к этой категории, но это другой тип связи. Уровень, в котором находится материал, и сам открытый документ должны различаться.

Разделители относятся к оформлению. Стрелка или косая черта не должна выглядеть ещё одной ссылкой. При реализации не добавляйте лишние произносимые символы между каждым названием, если структура уже обозначена списком и навигационной областью.

Как показать цепочку на телефоне

Сначала проверьте полный путь с длинными названиями. Важно, сколько места остаётся для содержания и насколько легко выбрать нужного родителя. Уменьшение текста до трудно читаемого размера не решает проблему длины.

Можно переносить цепочку на несколько строк или готовить сокращённый вариант. Выбор зависит от глубины, названий и страницы. Если показываете только ближайшего родителя, посетитель должен понимать, куда ведёт этот переход и как найти более общую навигацию.

Если скрытые уровни раскрываются отдельным действием, оно становится полноценным элементом управления. Нужны доступное имя, клавиатурное управление и понятное закрытие. Одно многоточие, которое работает только при наведении мыши, не даёт надёжного способа добраться до уровней.

Не прячьте единственную полезную ссылку за обрезанным текстом. Проверьте касание соседних сегментов, увеличение текста и поворот экрана. Сокращение должно сохранять задачу навигации, а не просто помещать строку в макет.

Что передать в реализацию

Цепочку размещают в обозначенной навигационной области с понятным доступным именем. Родительские уровни оформляют как список ссылок. Конкретная HTML-структура должна сохранять их последовательность и отделять текущий элемент от соседних действий.

Обычные ссылки работают с привычной клавиатурой: переход по фокусу и открытие выбранного адреса. Не превращайте хлебные крошки в сложное меню со специальными сочетаниями клавиш без необходимости. Если появилось раскрытие скрытых уровней, его управление проверяют отдельно.

Передайте правило построения пути, реальные адреса, длинные примеры и мобильное состояние. Макет с короткими подписями не показывает, что произойдёт в глубокой ветке. Добавьте случай прямого входа и материал с несколькими категориями.

Техническая разметка для поисковых систем и видимая навигация — отдельные представления. Одно не рисует автоматически другое. Если проект использует оба, проверяйте их согласованность с выбранной структурой, не обещая определённый вид результата поиска.

Частые ошибки

• Показывать историю вместо структуры. При прямом входе цепочка распадается или зависит от чужого маршрута.
• Ссылаться на несуществующий уровень. Красивое название не помогает, если переход возвращает ошибку или неподходящий список.
• Не определить основную рубрику. Материал с несколькими категориями получает случайный путь.
• Сделать разделители действиями. Лишние фокусируемые элементы усложняют обычный проход по ссылкам.
• Скрыть смысл на телефоне. Слишком короткие подписи и недоступное раскрытие лишают цепочку пользы.

Как проверить

• При прямом открытии понятно место страницы в структуре.
• Родительские уровни расположены от общего к частному.
• Все ссылки открывают существующие ожидаемые разделы.
• Для нескольких рубрик есть устойчивое правило.
• Текущий документ и родительский список различаются.
• Цепочка доступна с клавиатуры и на узком экране.
• После переноса материала проверены и подписи, и адреса.

Общую систему переходов поможет согласовать разбор навигации сайта. Затем выполните проверку с клавиатуры и оцените страницу на телефоне. Помощь с оформлением интерфейса можно найти в разделе Дизайн сайтов.

Вопросы и ответы

Хлебные крошки заменяют основное меню?

Они показывают конкретный родительский путь, а основное меню раскрывает главные части сайта. Проверьте, какую задачу решает каждый элемент. На сложном сайте цепочка обычно служит дополнительным ориентиром.

Нужно копировать папки из адреса страницы?

Не автоматически. Технический URL может не отражать удобную иерархию материалов. Выбирайте существующие понятные уровни и проверяйте, что переходы ведут в ожидаемые разделы.

Последнее название обязательно делать ссылкой?

Нет. Текущую страницу можно показать текстом, а иногда её место объясняет соседний заголовок. Если последний элемент является ссылкой на открытый документ, обозначьте текущее состояние доступным способом.

Какой путь показывать у статьи в двух категориях?

Определите основную ветку либо согласованное контекстное правило с вариантом для прямого входа. Не полагайтесь только на предыдущее действие браузера. Одинаковое открытие должно давать объяснимый результат.

Можно сократить цепочку на телефоне?

Да, если полезные переходы и смысл сохраняются. Проверьте ближайшего родителя, длинные подписи и доступ к скрытым уровням. Не заменяйте навигацию декоративной строкой, которую невозможно использовать.

Цепочка подходит для шагов оформления заказа?

Для шагов линейного процесса нужен отдельный способ показать прогресс и допустимые переходы. Родительская иерархия сайта отвечает на другой вопрос. Не смешивайте оба смысла в одной последовательности без понятного разделения.

Что проверить после смены категории?

Откройте материал напрямую и пройдите каждый родительский переход. Сверьте подписи с назначениями, проверьте несколько рубрик и мобильный вид. Изменение одного текста в шаблоне ещё не подтверждает правильность всей цепочки.