导航页头`Header`

站点顶部导航栏组件，支持 Logo 品牌标识、桌面端横向导航（带平滑滑动下划指示器）、右侧功能区（搜索与主题切换），以及窄屏视口下的平滑抽屉式汉堡折叠菜单。图鉴支持桌面全宽与移动端 380px 模拟视口双向切换。

亲手试一试。

01 / LIVE PREVIEW

VIEWPORT

WIDTH

当前演示栏目笔记

笔记 · 碎片记录与灵感闪光

点击上方导航栏项目可切换激活项；向下滚动本区域可体验 Header 粘性吸顶 (sticky) 与磨砂毛玻璃 (backdrop-blur) 效果。

FEATURE HIGHLIGHTS / 特性说明

自适应居中对齐：通过 max_width 参数确保顶部导航项左右边缘与下方文章正文精准对齐。
指示器平滑过渡：激活项下方带独立的 nav-indicator 下划线，栏目切换时平滑滑动。
移动端交互：在移动端或窄屏视口下自动转换为旋转图标汉堡按钮与平滑展开面板。

— 往下滚动查看 Header 磨砂吸顶效果 —

STATES / 示例状态

当前栏目桌面导航手机菜单视口切换

本地演示，内容不会保存。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

let route = use_route::<Route>();
Header {
    nav_items: build_nav_items(route),
    right_content: rsx! { SearchIconLink {} ThemeToggle {} },
    max_width: "max-w-4xl",
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`nav_items`Vec<NavItemConfig>	由调用方提供	导航项列表（包含 route 目标路由、label 显示文本及 is_active 激活状态）。
`right_content`Element	由调用方提供	右侧自定义内容插槽（如 SearchIconLink 搜索入口与 ThemeToggle 主题切换按钮）。
`max_width`&'static str	max-w-3xl	内部导航最大宽度类，需与正文 max-w-* 严格对齐以保证左右边缘一致。
`menu_id`&'static str	mobile-nav-menu	小屏汉堡菜单的稳定 DOM ID；同页有多个 Header 实例时必须各不相同。
`on_demo_navigate`Option<EventHandler<&'static str>>	None	图鉴局部演示回调；正式页面省略以保留真实的全局路由 Link 跳转行为。
`page_shell`bool	true	页面过渡外壳标记；图鉴实例设为 false 以免被 View Transition 识别为真实全站外壳。

YGGDRASIL · 每一个细节，都有回应。src/components/header.rs