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

Вкладки, меняющие адрес, пытаются быть разделами. Хлебные крошки на плоском сайте — украшение. Индикатор шагов, позволяющий прыгнуть вперёд, — это полоса вкладок с номерами.

Анатомия

Условие для каждого записано в библиотеке, и делятся они по охвату:

У приложения есть верхняя панель — GrNavbar. Основные разделы и глобальные действия, одинаковые на каждом экране.
Разделов много и они постоянны — GrSidebar. Когда в верхней панели кончается место, а список — свойство приложения, а не страницы.
Мобильный интерфейс — GrBottomNav. Там, где большой палец, для трёх-пяти мест, которые действительно нужны.
Вложенность реальна — GrBreadcrumbs. Именно реальна: путь, существующий в данных, а не выдуманный ради шапки.
Разделы с разным содержимым — GrTabs, а GrTabPanels, когда этим разделам нужны панели. Переключение без ухода со страницы.
Оформление заказа или регистрация — GrSteps. Процесс с порядком, который умеет не пускать дальше, пока текущий шаг не сделан.
Список не помещается на экран — GrPagination.
Команд много и они разбросаны — GrCommandPalette. ⌘K по всему, что приложение умеет, — для того, кто уже знает, чего хочет.

Пример

Так и не так

Так — Вкладки для содержимого, маршруты для мест

Если это можно положить в закладки, отправить коллеге или ждать, что кнопка «назад» сюда вернёт, — это место, и у него должен быть адрес. Вкладки нужны, чтобы переключать показанное внутри одного места.

Так не надо — Вкладки, втихую меняющие страницу

Полоса вкладок, подменяющая весь экран и оставляющая адрес прежним, ломает кнопку «назад» и всякую ссылку, которой кто-нибудь попробует поделиться. Человек перешёл — просто браузеру об этом не сказали.

Так — Шаги держат, вкладки циклят

GrTabs ходит стрелками циклично, Home и End — к краям: это составной виджет выбора. У GrSteps кольца стрелок нет намеренно — это навигация по процессу, каждый доступный шаг сам себе остановка Tab, а недоступные недоступны не случайно.

Так не надо — Индикатор шагов, по которому можно прыгать

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

Так — Хлебные крошки, когда путь существует

GrBreadcrumbs показывает, где человек находится внутри иерархии, которая действительно есть: каталог, дерево файлов, вложенные настройки.

Так не надо — Хлебные крошки на плоском сайте

«Главная / Цены» не сообщает никому ничего: пути не было, а строка занимает место и предлагает клик туда же, куда ведёт логотип.

Доступность

Полоса вкладок — клавиатурный паттерн, а не ряд кнопок. Стрелки ходят между вкладками циклично, Home и End — к краям, а сама полоса это одна остановка Tab, а не по одной на вкладку. GrTabs это реализует, а GrTabPanels связывает панели с вкладками через ARIA, чтобы объявленное совпадало с показанным.

Шаги — намеренно не этот паттерн. Это ссылки по процессу, поэтому каждый доступный шаг сам себе остановка Tab. Дать им кольцо стрелок значило бы объявить виджет выбора там, где последовательность.

«Вы здесь» надо сказать, а не только нарисовать. Текущий раздел в панели, текущая страница в пагинации, текущий шаг: цвет пожирнее невидим для скринридера — и для всякого, кто не различает два оттенка одного тона.

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

Компоненты паттерна

Список строится из frontmatter, а не из ссылок в тексте: переименование слага здесь не теряется.

GrNavbarНавигация
GrSidebarНавигация
GrBottomNavНавигация
GrBreadcrumbsНавигация
GrTabsНавигация
GrTabPanelsНавигация
GrStepsНавигация
GrPaginationНавигация
GrCommandPaletteНавигация

Клавиатура

Контракты приходят из библиотеки. Паттерн их не пересказывает — он на них ссылается.

Что решает