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

Когда использовать#

Страница лежит глубоко: проект → его ключи → один ключ, и человеку нужно вернуться на уровень-другой вверх.
На страницу приходят по ссылке извне, минуя меню, и без пути непонятно, чья она.
Уровни вложены друг в друга, а не стоят рядом: соседние виды одного объекта переключают вкладки.

Не ставьте крошки на страницу первого уровня: путь из одного пункта ничего не объясняет. Разделы внутри объекта показывает дерево разделов, а навигацию по приложению — единое меню.

Путь к странице#

Крошки — дети узла Кит.Крошки, каждая Кит.Крошка(Подпись, Адрес). Последняя крошка — текущая страница: она печатается текстом, без ссылки, даже если адрес у неё задан, — ссылка на саму себя только вернула бы человека туда, где он уже стоит.

Проект, его ключи и один ключ

HTML = Кит.Крошки(
	Кит.Крошка("Проекты", "/проекты"),
	Кит.Крошка("альфа", "/проекты/альфа"),
	Кит.Крошка("Ключи", "/проекты/альфа/ключи"),
	Кит.Крошка("ноутбук")).Рендер();

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

Уровень без своей страницы

HTML = Кит.Крошки(
	Кит.Крошка("Проекты", "/проекты"),
	Кит.Крошка("Архив"),
	Кит.Крошка("бета")).Рендер();

Компонент строкой#

Тот же путь печатает компонент набора: Набор.Крошки().Отрисовать(Пункты) принимает массив пунктов Подпись, Адрес или модель-структуру с полями Пункты и Подпись.

Массив пунктов

Пункты = Новый Массив();
Пункты.Добавить(Новый Структура("Подпись, Адрес", "Участники", "/участники"));
Пункты.Добавить(Новый Структура("Подпись, Адрес", "Анна", "/участники/анна"));
Пункты.Добавить(Новый Структура("Подпись", "Проекты"));

HTML = Набор.Крошки().Отрисовать(Пункты);

Пустой путь не печатает ничего: рамка без пунктов места не занимает.

Пустой путь — ничего

этот вызов не печатает ничего

HTML = Набор.Крошки().Отрисовать(Новый Массив());

В доме настроек#

У дома настроек крошки задаёт слово Крошка(Подпись, Адрес), а печатает их этот же компонент — над шапкой дома. Имя навигации у дома своё, из ключа словаря settings.frame.crumbs.label.

Крошки над домом

Ключи доступа

Ключи

Ключей пока нет.

HTML = Кит.ДомНастроек("Ключи доступа", "/проекты/альфа/ключи", "",
	Кит.Секция("Ключи", Кит.Примечание("Ключей пока нет.").Вид("пусто")))
	.Ключ("project")
	.Крошка("Проекты", "/проекты").Крошка("альфа", "/проекты/альфа").Крошка("Ключи")
	.Рендер();

Гайдлайны#

ДелайтеПуть от корня: каждый уровень — шаг вверх

Код

HTML = Кит.Крошки(
	Кит.Крошка("Проекты", "/проекты"),
	Кит.Крошка("альфа", "/проекты/альфа"),
	Кит.Крошка("Участники")).Рендер();

Не делайтеИстория переходов вместо пути: крошки — не кнопка «назад»

Код

HTML = Кит.Крошки(
	Кит.Крошка("Поиск", "/поиск?q=альфа"),
	Кит.Крошка("Анна", "/участники/анна"),
	Кит.Крошка("альфа", "/проекты/альфа"),
	Кит.Крошка("Участники")).Рендер();

ДелайтеПодпись крошки — имя страницы, коротко

Код

HTML = Кит.Крошки(
	Кит.Крошка("Проекты", "/проекты"),
	Кит.Крошка("альфа")).Рендер();

Не делайтеПодпись-предложение: путь не читается одной строкой

Код

HTML = Кит.Крошки(
	Кит.Крошка("Все проекты, в которых вы участвуете", "/проекты"),
	Кит.Крошка("Проект «альфа» и его настройки")).Рендер();

Доступность#

Крошки печатаются <nav> с aria-label: по умолчанию — текст словаря интерфейса по ключу chrome.crumbs, своё имя задаёт слово Подпись. Без имени скринридер прочёл бы «навигация» — одну из нескольких на странице.
Последний пункт помечен aria-current="page": скринридер называет его текущей страницей. Ссылки у него нет, поэтому табуляция по нему не ходит.
Разделитель «/» рисует лист стилей (::before), в тексте его нет: скринридер читает подписи, а не косые черты.
Подпись крошки — данные: она экранируется, как любой текст кита.

Модель#

Структура ниже — прежний вид модели; в дереве холста крошки — узлы Кит.Крошка, а имя навигации пишет слово Подпись.

Крошки.Отрисовать()src/Классы/компоненты/Крошки.os

Отрисовывает крошки.

Параметры:
 Модель - Структура, Массив - Пункты (массив структур: Подпись, Адрес — пустой адрес
          печатает пункт текстом; у последнего пункта адрес не печатается вовсе),
          Подпись (aria-label навигации; по умолчанию текст словаря «chrome.crumbs»).
          Массив на месте модели — сами пункты.

Возвращаемое значение:
 Строка - фрагмент <nav class="crumbs"> либо "" для пустого списка: строка без пунктов
          ни о чём не говорит, а место занимает.

Кит.Крошки()src/Классы/холст/Кит.os

Крошки — путь от корня к текущей странице. Пункты — дети узла, узлы Кит.Крошка;
последний из них — текущая страница: печатается текстом, без ссылки, с aria-current.
Слова: Подпись (имя навигации, по умолчанию из словаря «chrome.crumbs»).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Структура - (необязательные) крошки; Структура первым
         аргументом — прежний вид модели с полем Пункты.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Крошка()src/Классы/холст/Кит.os

Крошка — пункт Кит.Крошки. Печатается только внутри них.

Параметры:
 Подпись - Строка - название страницы.
 Адрес   - Строка - (необязательный) её адрес; пустой — пункт текстом. У последней
           крошки адрес не печатается: это страница, на которой человек стоит.

Возвращаемое значение:
 ЭлементЭкрана