> For the complete documentation index, see [llms.txt](https://prizmds.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prizmds.gitbook.io/documentation/components/navigation-panel/header.md).

# Header

## Обзор

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

## Анатомия

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FTxU2Vm7SQQIOXtJWoJOn%2Fimage.png?alt=media&amp;token=f0622b61-04d4-4447-9e11-c438deb3153c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FgGJKc4BvSck6pTUW61Rq%2Fimage.png?alt=media&amp;token=be40abe8-9318-409c-be8e-303cb88bf3ab" alt=""><figcaption></figcaption></figure>

Header состоит из:&#x20;

1. Logo + Navigation menu. Обязательная часть, содержит блок с логотипом системы и кнопку, вызывающую Navigation menu (опционально).&#x20;
2. Page name / Navigation. Обязательная часть, название страницы или простая навигация.&#x20;
3. Global system filters. Фильтры или конролы, глобальные в рамках системы (применяются ко всей системе, не только к текущей странице).&#x20;
4. System modules. Системные модули.&#x20;
5. Platform modules\*. Модули уровня платформы.&#x20;
6. Platform menu\*. Меню приложений платформы.

{% hint style="info" %}
в случае платформенного решения
{% endhint %}

Logo + Navigation menu

Блок с логотипом системы может являться:

1. Ссылкой на главную страницу. В случае, когда навигация приложения представлена только при помощи шапки.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F38E3ELMM7uvPgKTTwXch%2Fimage.png?alt=media&amp;token=33d38bf2-259b-45f8-bc72-056919374828" alt="" width="188"><figcaption></figcaption></figure>

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

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FdYcdihi3RGqEHczoiAbt%2Fimage.png?alt=media&amp;token=d882860e-1009-4f39-a0be-df16f5bf0421" alt="" width="212"><figcaption></figcaption></figure>

## Page name / Navigation

### Система-одностраничник:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FjhM3RnlLNu5br91qJskm%2Fimage.png?alt=media&amp;token=b0d52424-124a-4489-a219-6b8be00a96fc" alt=""><figcaption></figcaption></figure>

### Навигация без разделов (табы):

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FqgdBGPOYrPhBXRUD0RkH%2Fimage.png?alt=media&amp;token=887a971f-557c-4650-b06d-d81bb572c800" alt=""><figcaption></figcaption></figure>

### Навигационная структура через хлебные крошки:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FO4uyLVKiKguDPP8amirt%2Fimage.png?alt=media&amp;token=4edf4374-4a96-4af7-9be9-1d546d96996f" alt=""><figcaption></figcaption></figure>

### Навигация с разделами (1 уровень)

Такой паттерн рекомендуется использовать для малого количества разделов (2-4). Так как пользователю придется “проходить” по каждому разделу в поисках нужной страницы.&#x20;

Внутри каждого раздела навигация может варьироваться в зависимости от кол-ва страниц и информационной структуры:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FMpQiUBVOP6TOPtwDbJWn%2Fimage.png?alt=media&amp;token=857f89bc-716a-4970-93a2-56dc22d5d0c2" alt=""><figcaption></figcaption></figure>

Выбор раздела:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FHV9wYxfHCLHNZGQA9kuu%2Fimage.png?alt=media&amp;token=0c272e06-26f2-4d09-b98b-e7ef19220a72" alt=""><figcaption></figcaption></figure>

### Дополнительно

Простая навигация может быть реализована в сочетании с панелью:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FnJm7edJAkKxFqv8fSBam%2Fimage.png?alt=media&amp;token=1010329c-a7dc-4efc-a362-c63808d84cee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FlnwVVoo5DOaH1L8eo0yj%2Fimage.png?alt=media&amp;token=3ee4eaa2-9a55-47d3-800d-0ed853e1ef75" alt=""><figcaption></figcaption></figure>

### Навигация состоит из Header и Navigation menu

Для более сложных вариантов навигации стоит использовать сочетание Header + Navigation menu.

* В таком случае в блоке с логотипом появляется иконка Navigation menu.&#x20;
* За ней следует название выбранной страницы или простая внутренняя навигация страницы

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FUrZg5yscruJj7b61oWA1%2Fimage.png?alt=media&amp;token=bdad9a0e-2b4f-4be7-84dc-67639a938ba4" alt=""><figcaption></figcaption></figure>

## Global system filters

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

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FhQ8p9oe6sChFHFHq5bJH%2Fimage.png?alt=media&amp;token=68b2786b-dbad-4529-b1de-b51988b232aa" alt=""><figcaption></figcaption></figure>

Не используйте системные фильтры, если они не применимы ко всем разделам / страницам системы - используйте в таком случае фильтры для страниц (например, в панели под шапкой):

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FL6gmYv57F1DQidBSDffm%2Fimage.png?alt=media&amp;token=8f0eceb7-24b3-4575-9c48-213088b9a0bd" alt=""><figcaption></figcaption></figure>

## System modules / Platform modules

Модули - это функциональные блоки (подключаемые к системе или реализованные в ней), повышают уровень пользовательского опыта.&#x20;

Модули могут быть как системные, так и платформенные.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F4N0Cr58c67BUu1e9rb3l%2Fimage.png?alt=media&amp;token=72b3cd77-3b87-4f8d-befb-d17c503208aa" alt=""><figcaption></figcaption></figure>

В Header модули представлены в виде кнопок-иконок, которые могут содержать счетчики событий.&#x20;

Нажатие на кнопку модуля вызывает появление окна модуля или Overlay-menu. Например:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fub31VszjO4qrDdP21nvf%2Fimage.png?alt=media&amp;token=b712550d-2621-49cf-8c36-abe3d72028b1" alt="" width="375"><figcaption></figcaption></figure>

Примеры модулей:&#x20;

1. Пользовательские настройки&#x20;
2. Уведомления о событиях и работе системы&#x20;
3. Уведомления о качестве предоставляемых данных&#x20;
4. Техподдержка&#x20;
5. Отображение даты и времени (дополнительно для приложений, которые используются в полноэкранном режиме) и др.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FY6YVD0T3Vuok8yi6v3re%2Fimage.png?alt=media&amp;token=8239afbd-b4a0-4336-9d24-1b6a182131ef" alt="" width="375"><figcaption></figcaption></figure>

## Адаптивность

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FywYJFXPAi4HNXiPGxgnF%2Fimage.png?alt=media&amp;token=75a8a165-cde7-4421-a997-1568846dd75a" alt=""><figcaption></figcaption></figure>