概览

团队为何搜索这个库

当你需要带有 Router 感知和可复用 UX 模式的水平、垂直或逐级深入菜单时，请选用这个 Angular 导航组件。

安装

npm install ng-hub-ui-nav

跳转到

适用于

应用外壳
管理后台仪表盘
文档菜单
响应式导航

关于 nav

ng-hub-ui-nav 在 Angular 应用超越简单顶部菜单时非常有用。它覆盖了垂直侧边栏、下拉树、嵌套导航以及响应式折叠模式，这些模式常见于文档站点、仪表盘和企业级应用外壳。

功能指南

核心导航

核心的水平与垂直导航，支持数据驱动的项渲染、图标、徽章和禁用状态。

示例:

基础水平导航

垂直手风琴导航

垂直弹出导航

下拉嵌套

无限层级的多级下拉菜单，支持点击、悬停或组合触发模式。包含分隔符和标题项。

示例:

嵌套多级下拉菜单

标题与分隔符

下拉触发器

状态

演示禁用的根项和嵌套项及其交互行为。

示例:

禁用状态

响应式行为

响应式折叠、移动端渲染和 RTL 插槽行为。

示例:

响应式折叠模式

Offcanvas mode

Click the toggler to open the mobile panel.

Fullscreen mode

Click the toggler to open the mobile panel.

带起始/结束插槽的 RTL

插槽与模板

起始/结束插槽投影和自定义项模板，可用于构建量身定制的导航界面。

示例:

起始与结束插槽

自定义项模板

路由集成

通过 routerLinkActive 选项实现路由链接、查询参数、片段和激活状态匹配。

示例:

路由集成与激活状态

This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.

事件

可观察链接、下拉菜单、移动端切换和面板导航的交互事件。

示例:

事件 API

Last event:

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

面板下钻

堆叠式面板导航，点击下拉菜单会在侧边面板中打开其子项。支持可配置的最大面板数、带返回导航的下钻，以及左/右侧边栏定位。

示例:

面板钻取导航

单项 expandMode 覆盖

右侧边栏面板模式

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

概览