<nav class="icen-nav icen-nav--sticky" data-icen-scroll-reactive> <div class="icen-nav-left"> <span class="demo-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg> ICEN</span> </div> <div class="icen-nav-center"> <button class="icen-nav-btn icen-motion icen-pressable icen-focus-ring is-active">概览</button> <button class="icen-nav-btn icen-motion icen-pressable icen-focus-ring">文档</button> <button class="icen-nav-btn icen-motion icen-pressable icen-focus-ring">社区</button> </div> <div class="icen-nav-right"> <button class="icen-nav-btn icen-nav-btn--icon icen-motion icen-pressable icen-focus-ring" aria-label="搜索"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.3 13.3 17 17M14.5 8.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0"></path></svg> </button> <span class="icen-nav-divider"></span> <button class="icen-nav-btn icen-motion icen-pressable icen-focus-ring">登录</button> </div></nav>特性
- 结构：
icen-nav-left/-center/-right三段；icen-nav-btnpill 导航钮，--icon图标钮 - 玻璃：
icen-nav--sticky吸顶 + 模糊背景；icen-nav-divider分隔线 - 滚动：挂
data-icen-scroll-reactive后滚动超 12px 自动切.is-scrolled
接口
- 初始化
initNav()（kit 一行入口可直接命名导入）- 导出
-
initNav - 事件
-
icen:nav-selectdetail 契约见IcenEventMap - 类型
dist/behaviors/nav.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initNav } from '@icen.ai/ui/kit/nav';initNav();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add nav
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/nav.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initNav } from '@icen.ai/ui/behaviors/nav';initNav(); // scrollY > 12 时给 .nav[data-icen-scroll-reactive] 加 .is-scrolled