Каркас приложения

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

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

Не использовать:

• Страница является автономным документом или коротким одностраничным сценарием.
• Композиция повторяет бизнес-виджет, а не глобальные регионы приложения.

Состав

Ограничения

• Обязательно: Выражать каркас семантическими регионами header, nav и main; давать навигации доступное имя, если на странице она не одна.
• Обязательно: Показывать текущий маршрут не одним цветом и размечать его через aria-current=page.
• Обязательно: На узком экране делать открытие навигации явным, поддерживать Escape и возвращать фокус на кнопку открытия после закрытия.
• Запрещено: Регистрировать Header или Sidebar как отдельные компоненты без собственного поведения и переносимого API.
• Запрещено: Закреплять в каноне названия маршрутов, продуктовые роли, права доступа и состав бизнес-действий.
• Рекомендуется: Держать глобальное действие в одном устойчивом регионе, не дублируя его одновременно в header, navigation и содержимом.

Логика отклика

1. Ориентация Пользователь определяет продукт, текущий раздел и доступные глобальные действия. → Header задаёт контекст, navigation явно отмечает текущий маршрут, main получает фокус документа.
2. Переход Пользователь выбирает другой глобальный раздел. → Маршрут меняется, активный пункт обновляет текстовый или форменный признак и aria-current.
3. Узкий экран Пользователь открывает, использует или закрывает навигацию. → Фокус управляется предсказуемо; Escape закрывает область, после закрытия фокус возвращается на trigger.

Контекстный пример

Скелет экрана

1. headerКонтекст продукта и ограниченный набор глобальных действий.
2. navigationИменованная глобальная навигация и текущий маршрут.
3. mainЕдинственное основное содержимое текущего маршрута.
4. contextОпциональная локальная навигация или сведения, не дублирующие глобальную.