Componente Navigation Menu para Angular | ng-hub-ui-nav

Componente de navegación para Angular con dropdowns, paneles drill-down, colapso responsive, integración con Router y theming mediante variables CSS.

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Navegación principal

Navegación horizontal y vertical esencial con renderizado de elementos basado en datos, iconos, badges y estados deshabilitados.

Navegación horizontal básica

Navegación vertical en acordeón

Navegación vertical desplegable

Anidamiento de dropdowns

Menús dropdown multinivel ilimitados con modos de activación por clic, hover o combinados. Incluye elementos separadores y de cabecera.

Menús desplegables anidados de varios niveles

Cabeceras y separadores

Activadores de menú desplegable

Estados

Demuestra los elementos raíz y anidados deshabilitados y su comportamiento de interacción.

Estados deshabilitados

Etiquetas truncadas y tooltip

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

Comportamiento responsive

Colapso responsive, renderizado móvil y comportamiento de slots en RTL.

Modos de colapso responsive

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 con slots de inicio/fin

Rail de iconos de escritorio

Colapsa la navegación vertical a un rail de solo iconos que mantiene cada sección a un clic: las etiquetas aparecen como tooltips, los grupos se abren como flyouts en overlay y la aplicación posee el toggle y la persistencia mediante el enlace bidireccional rail.

Rail de iconos colapsado

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.

Slots y templates

Proyección de slots de inicio y fin y templates de elemento personalizados para construir interfaces de navegación a medida.

Slots de inicio y fin

Plantilla de elemento personalizada

Integración con el router

Enlaces del router, query params, fragments y coincidencia de estado activo mediante las opciones de routerLinkActive.

Integración con el router y estados activos

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.

Eventos

Observa los eventos de interacción de enlaces, dropdowns, toggles móviles y navegación por paneles.

API de eventos

Last event:

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

Drill-down por paneles

Navegación por paneles apilados en la que al hacer clic en un dropdown se abren sus elementos hijos en un panel lateral. Admite un máximo de paneles configurable, drill-down con navegación hacia atrás y posicionamiento de la barra lateral a izquierda o derecha.

Navegación de paneles en profundidad

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

Sobrescritura de expandMode por elemento

Modo panel de barra lateral derecha

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

Barra lateral fija vertical

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.