Topbar — это панель инструментов, которая всегда остается видимой на странице и обеспечивает быстрый доступ к навигации и управлению.

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

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

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

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

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

Мы рекомендуем использовать следующий набор действий (слева направо):

• Индикаторы (например, индикатор обновления данных)
• Группа кнопок-иконок (фильтры)
• Частые действия в виде кнопок (например, «Добавить…», «Поделиться»)
• Дополнительные действия в виде дропдаун меню, куда можно отнести все второстепенные действия относящиеся к текущей странице.

Внутренние элементы могут подстраиваться под размер панели.

Допустимое минимальное расстояние между левой частью и правой частью с действиями составляет 80px и задается через CSS-переменную --kbq-top-bar-spacer-min-width.

При сжатии панели хлебные крошки будут перестраиваться следующим образом:

Вариант с использованием только заголовка будет перестраиваться следующим образом:

Более подробно сжатие хлебных крошек разобрано на странице хлебных крошек.

Панель может фиксироваться при прокрутке страницы.