Компонент навигационного меню для Angular | ng-hub-ui-nav
Навигационный компонент для Angular с выпадающими меню, панелями drill-down, адаптивным сворачиванием, интеграцией с Router и тематизацией через CSS-переменные.
Обзор
Почему команды ищут эту библиотеку
Обращайтесь к этому навигационному компоненту для Angular, когда нужны горизонтальные, вертикальные или drill-down меню с учётом Router и переиспользуемыми UX-паттернами.
Установка
npm install ng-hub-ui-navПерейти к
Идеально для
- оболочки приложений
- админ-дашборды
- меню документации
- адаптивная навигация
О библиотеке nav
ng-hub-ui-nav полезен, когда приложения Angular перерастают простое верхнее меню. Он покрывает вертикальные боковые панели, выпадающие деревья, вложенную навигацию и адаптивные паттерны сворачивания, которые встречаются на сайтах документации, в дашбордах и корпоративных оболочках.
Руководства по возможностям
Базовая навигация
Базовая горизонтальная и вертикальная навигация с отображением элементов на основе данных, иконками, бейджами и состояниями disabled.
Примеры:
Базовая горизонтальная навигация
Базовая горизонтальная навигация
Вертикальная навигация-аккордеон
Вертикальная навигация-аккордеон
Вертикальная всплывающая навигация
Вертикальная всплывающая навигация
Вложенность dropdown
Неограниченные многоуровневые меню dropdown с режимами триггера click, hover или комбинированным. Включают элементы-разделители и заголовки.
Примеры:
Вложенные многоуровневые выпадающие меню
Вложенные многоуровневые выпадающие меню
Заголовки и разделители
Заголовки и разделители
Триггеры выпадающих меню
Триггеры выпадающих меню
Состояния
Демонстрирует отключённые корневые и вложенные элементы и их поведение при взаимодействии.
Примеры:
Отключённые состояния
Отключённые состояния
Адаптивное поведение
Адаптивное сворачивание, мобильный рендеринг и поведение слотов в RTL.
Примеры:
Адаптивные режимы сворачивания
Адаптивные режимы сворачивания
Offcanvas mode
Click the toggler to open the mobile panel.
Dropdown mode
Click the toggler to open the mobile panel.
Fullscreen mode
Click the toggler to open the mobile panel.
RTL со слотами начала/конца
RTL со слотами начала/конца
Слоты и шаблоны
Проекция слотов start/end и пользовательские шаблоны элементов для построения индивидуальных интерфейсов навигации.
Примеры:
Слоты начала и конца
Слоты начала и конца
Пользовательский шаблон элемента
Пользовательский шаблон элемента
Интеграция с Router
Ссылки Router, query-параметры, фрагменты и сопоставление активного состояния через опции routerLinkActive.
Примеры:
Интеграция с роутером и активные состояния
Интеграция с роутером и активные состояния
This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.
События
Наблюдайте за событиями взаимодействия для ссылок, dropdown, мобильных переключателей и навигации по панелям.
Примеры:
API событий
API событий
Last event:
{
"name": "none",
"payload": null
}Углубление по панелям
Стекированная навигация по панелям, где клик по dropdown открывает его дочерние элементы в боковой панели. Поддерживает настраиваемое максимальное число панелей, углубление с навигацией назад и позиционирование sidebar слева/справа.
Примеры:
Детализирующая навигация по панелям
Детализирующая навигация по панелям
Переопределение expandMode для каждого элемента
Переопределение expandMode для каждого элемента
Режим панели правой боковой панели
Режим панели правой боковой панели
Main content area — the sidebar is placed on the right and panels extend to the left.
Ключевые возможности
Последние изменения
Version 21.1.0 - 3/19/26, 12:00 AM
added: Panel drill-down expand mode with stacked side panels, configurable max visible panels, and drill-down with back navigation.
added: Per-item expandMode override (accordion, flyout, or panel) on HubNavItem.
added: Sidebar positioning with sidebarSide config (left or right).
added: Panel keyboard navigation (Escape, ArrowLeft) and automatic focus management.
added: Mobile fallback: panel mode degrades to accordion when collapsed.
added: CSS custom properties for panel styling (--hub-nav-panel-*).
Version 21.0.0 - 3/19/26, 12:00 AM
added: Initial release with horizontal and vertical navigation.
added: Data-driven API with HubNavItem interface supporting link, dropdown, header, separator, and custom types.
added: Unlimited dropdown nesting with recursive rendering.
added: Responsive collapsing with offcanvas, dropdown, and fullscreen mobile panel modes.
added: Vertical accordion and flyout expand modes.
added: Start/end slots via hubNavStart and hubNavEnd directives, plus custom item templates via hubNavItemTemplate.
added: Full Angular Router integration with routerLink, routerLinkActive, fragment, and queryParams support.
added: WCAG 2.1 AA keyboard navigation with WAI-ARIA menubar/menu pattern.
added: Complete CSS custom properties token set with 60+ variables.
added: HubNavConfigService with InjectionToken for global default configuration.