Компонент навигационного меню для Angular | ng-hub-ui-nav

Навигационный компонент для Angular с выпадающими меню, панелями drill-down, адаптивным сворачиванием, интеграцией с Router и тематизацией через CSS-переменные.

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Базовая навигация

Базовая горизонтальная и вертикальная навигация с отображением элементов на основе данных, иконками, бейджами и состояниями disabled.

Базовая горизонтальная навигация

Вертикальная навигация-аккордеон

Вертикальная всплывающая навигация

Вложенность dropdown

Неограниченные многоуровневые меню dropdown с режимами триггера click, hover или комбинированным. Включают элементы-разделители и заголовки.

Вложенные многоуровневые выпадающие меню

Заголовки и разделители

Триггеры выпадающих меню

Состояния

Демонстрирует отключённые корневые и вложенные элементы и их поведение при взаимодействии.

Отключённые состояния

Усечённые подписи и подсказка

Narrow sidebar — hover a clipped item to read its full label.

Адаптивное поведение

Адаптивное сворачивание, мобильный рендеринг и поведение слотов в 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 со слотами начала/конца

Настольная панель значков

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

Свёрнутая панель значков

Content area — the built-in toggle on the sidebar edge collapses the nav into an icon rail, returning horizontal space to data-dense screens. Hover a rail item to see its label; click a group to open its flyout.

Слоты и шаблоны

Проекция слотов 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.

Travel needs a real navigation to travel between, so the live instance is the sidebar of this very page: click two library entries and watch the mark move. It is deliberately reserved for a choice — a scroll spy reports position by replacing the URL rather than pushing one, and following that stepped this documentation's own menu through twenty highlight changes in six seconds of ordinary reading. That is what followReplacedUrls governs: true follows every report, a number of milliseconds follows only once they go quiet (this site uses 400), and false never follows.

События

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

API событий

Last event:

{
  "name": "none",
  "payload": null
}

Углубление по панелям

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

Детализирующая навигация по панелям

Main content area — the sidebar fills 100% of the container height.

Переопределение expandMode для каждого элемента

Режим панели правой боковой панели

Main content area — the sidebar is placed on the right and panels extend to the left.

Вертикальная закреплённая боковая панель

Sticky Sidebar

The navigation stays pinned while the content scrolls, which makes it useful for documentation pages and long settings views.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc sed velit tincidunt, in dictum sem gravida.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Two

Curabitur ultrices dui sit amet sem iaculis, a faucibus ligula tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Three

Suspendisse potenti. Mauris id dolor consequat, pharetra arcu non, rhoncus ligula. Donec at ligula a ipsum suscipit sollicitudin.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Four

Aliquam erat volutpat. Duis vel mi sit amet lorem feugiat aliquet. Donec mattis, massa et commodo suscipit, mauris arcu cursus dolor.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.