Angular 导航菜单组件 | ng-hub-ui-nav
Angular 导航组件，支持下拉菜单、逐级深入面板、响应式折叠、Router 集成和 CSS 变量主题。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
核心导航
核心的水平与垂直导航，支持数据驱动的项渲染、图标、徽章和禁用状态。
基础水平导航
垂直手风琴导航
垂直弹出导航
下拉嵌套
无限层级的多级下拉菜单，支持点击、悬停或组合触发模式。包含分隔符和标题项。
嵌套多级下拉菜单
标题与分隔符
下拉触发器
状态
演示禁用的根项和嵌套项及其交互行为。
禁用状态
截断标签与提示
Narrow sidebar — hover a clipped item to read its full label.
让某一条目与众不同
Only Billing carries cssClass: 'nav-entry--overdue'. The class is written on that entry's hub-nav-item element, so one rule in your own stylesheet reaches it.
响应式行为
响应式折叠、移动端渲染和 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.
插槽与模板
起始/结束插槽投影和自定义项模板，可用于构建量身定制的导航界面。
起始与结束插槽
自定义项模板
路由集成
通过 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.
自己标记的条目
- Pinned step — no route at all,
active: true: marked. - Nav docs — on
/nav, no flag: the router marks it. - Nav docs (opted out) — on
/nav,active: false: refused.
页内导航
当决定读者身在何处的不是路由时，如何标记某个条目：`activeItemId`、条目自身的 `active` 标记，以及直接绑定到菜单的滚动监听。
无路由的页内导航条
- activeItemId
summary- aria-current
—- address bar
Summary
What the agreement covers and who signs it.
Requirements
What each party has to provide before work starts.
Delivery
Milestones, acceptance and what happens when a date slips.
Support
Response times and the channels that carry them.
与菜单绑定的滚动监听
Scroll the column and the mark follows. Press an entry and it jumps — spin the wheel during the animation and the mark still lands where you asked.
Onboarding
The first week: accounts, hardware and who to ask.
The sticky header above covers the first lines of whatever sits at the top, which is exactly what offset compensates — and what the old scrollIntoView jump had no way to take into account.
Expenses
What is reimbursed, with which receipt and by when.
The sticky header above covers the first lines of whatever sits at the top, which is exactly what offset compensates — and what the old scrollIntoView jump had no way to take into account.
Time off
Holiday, sick leave and the notice each one needs.
The sticky header above covers the first lines of whatever sits at the top, which is exactly what offset compensates — and what the old scrollIntoView jump had no way to take into account.
Equipment
What the company provides and how it is replaced.
The sticky header above covers the first lines of whatever sits at the top, which is exactly what offset compensates — and what the old scrollIntoView jump had no way to take into account.
Leaving
Notice periods, handover and returning the hardware.
The sticky header above covers the first lines of whatever sits at the top, which is exactly what offset compensates — and what the old scrollIntoView jump had no way to take into account.
事件
可观察链接、下拉菜单、移动端切换和面板导航的交互事件。
事件 API
Last event:
{
"name": "none",
"payload": null
}面板下钻
堆叠式面板导航，点击下拉菜单会在侧边面板中打开其子项。支持可配置的最大面板数、带返回导航的下钻，以及左/右侧边栏定位。
面板钻取导航
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.