Навигационное меню приложения представляет собой структурированный список ссылок на доступные пользователю элементы данных и функциональные возможности. Содержимое навигационного меню состоит из упорядоченной структуры элементов отображения данных (папок, документов, внешних, внутренних ссылок, мнемосхем, отчётов и так далее, в зависимости от контекста использования). Содержимое навигационного меню приложения формируется в зависимости от прав пользователя. Пункты меню, доступ к которым запрещён, могут быть скрыты или заблокированы для выбора пользователем, если в навигационном меню нет доступных для отображения данных, то в области отображения должна быть надпись: «Нет данных для отображения».

Анатомия

Заголовочный блок
Инструменты и элементы управления
Элементы структуры (Страницы, папки, группы, ссылки и т.д.)

Описание работы

Возможности навигационного меню

может быть как одноуровневым, так и многоуровневым;
может содержать групповые панели (каждая из которых может содержать независимую иерархическую структуру и свою панель инструментов);
может содержать корневые/группирующие элементы. К папке может быть привязан контекст, например, мнемосхема;
может иметь панель инструментов для изменения представления элементов меню и работы со структурой меню (каждая групповая панель может иметь свою панель инструментов);
может иметь поиск и фильтры для быстрого ориентирования в больших деревьях структуры;
может иметь настройки, общие для всех групповых панелей, например: переключение режимов множественного/одиночного выбора.

Режим отображения "Иерархия"

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

Основные характеристики режима "Иерархия":

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

Если используется только один режим иерархии (без режима "Папки"), иконка переключения режима не выводится.

Режим отображения "Папки"

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

Основные характеристики режима "Папки":

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

Работа в режиме папки:

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

Если используется только один режим "Папки" (без режима "Иерархия"), иконка переключения режима не выводится.

Режим отображения "Рубрикатор"

Если приложение содержит множество элементов, которые удобно искать по алфавиту (например статьи, перечень документов и т.п.), навигационное меню может содержать режим "Рубрикатор"

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

Чтобы отключить режим рубрикатора необходимо включить другое представление - дерева или папки, или просто отключить режим рубрикатора. В этом случае (при отключении кнопки рубрикатора) структура элементов выводится в представлении дерева (по умолчанию).

Групповые панели

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

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

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

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

Одиночный режим групповых панелей

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

Множественный режим групповых панелей

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

При этом каждая панель может быть отображена в своем представлении: дерево, папка, рубрикатор.

Настройка множественного выбора распространяется на все панели.

Подгрузка

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

Поиск

Общие условия поиска

Поиск доступен по любому символу, должна быть возможность гибко задавать строку (например, искать по части имени «» - любое количество любых символов, «?» – один символ), после ввода первого символа и/или нажатия клавиши *Enter на клавиатуре результаты поиска выводятся в виде списка, отсортированного в соответствии с иерархией (если имеется).
Если нет совпадений с поисковым запросом, в поисковой выдаче выдается системное сообщение "Нет данных для отображения. Чтобы посмотреть информацию в этой области нужно изменить условия отображения или фильтрации".
Поисковая выдача выводится в том режиме/представлении (дерево, папка, рубрикатор), которое включено пользователем в данный момент.
Поиск может работать совместно с фильтром. Фильтрация помогает уточнить условия поиска, убирает из поисковой выдачи лишние запросы, не отвечающие активным фильтрам.
Автодополнение (autocomplete). При наборе символов существующий список элементов сразу "нагорячую" отфильтровывается в соответствии с набранными символами и выдает результаты с разными вариантами завершающей части текста.

Автоподстановка

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

Фильтр

Условиями фильтрации могут быть различные свойства элементов дерева - категории, классы, разделы, разряды, дата или диапазон дат создания, дата изменения, автор, другие признаки.

Кебаб

Если элементы управления панели инструментов не помещаются, в правом конце появляется кнопка кебаб, а сами инструменты “прячутся” в overlay-menu. Overlay-menu выравнивается по правому краю кебаб-кнопки.

Управляющие элементы скрываются справа налево. В панели инструментов есть кнопки запрещенные для скрытия в оверлей меню (например, "Поиск", "Свернуть/развернуть список").

Доступы

Для страниц, к которым у пользователя нет доступа на редактирование, высвечивается пометка "Просмотр".

Сплиттер (двойная стрелка)

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

При работе на сенсорных устройствах можно изменять размер панели перетягивая ее правую границу в соответствующем направлении.

Сокращения

Cимволы, которые не уместились заменяются на три точки (...).

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

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

Размеры

Внешние размеры

Ширина навигационного меню по умолчанию - 360 px.

Минимальная рекомендуемая ширина навигационного меню приложения - 360 px
Возможно уменьшение ширины НМ в угоду удобства пользователя. В этом случае оно уменьшается с шагом кратным 40 px: 320, 280, 240 и тд (не рекомендуется)