Skip to content
仅桌面端保证样式

Navbar 导航

EwNavbar 是站点导航:吸顶 + 滚动后背景磨砂与细边(可关),链接默认安静(hover 只变色不铺底), 品牌名用强字距展示体。移动端自动折叠为汉堡菜单。

基础用法

logo + 导航项 + 动作区
以下为真实组件:sticky 已关闭便于预览,实际使用保持默认开启。
vue
<EwNavbar logo-text="Nimbus" :items="navItems">
  <template #actions>
    <EwThemeToggle />
    <EwIconButton icon="github" aria-label="GitHub" />
    <EwIconButton icon="download" variant="soft" />
  </template>
</EwNavbar>

当前项高亮

active
active 传 label 或 href;也可以在每个 item 上单独标记 active。
vue
<EwNavbar logo-text="Nimbus" active="定价" :items="navItems" />

API

Props

属性说明类型默认值
items导航项 [{ label, href, target, active }]array[]
sticky吸顶booleantrue
blur滚动后背景磨砂booleantrue
hide-on-scroll下滑隐藏、上滑浮现(沉浸式长页面)booleanfalse
logo是否渲染默认品牌位booleantrue
logo-text品牌名string
logo-icon品牌图标名string
logo-image品牌图片地址string
active当前激活项(匹配 label 或 href)string

插槽

插槽说明
logo品牌位整体覆写
start左侧追加内容
center中部导航覆写
actions右侧动作区
default移动端菜单附加内容

基于 MIT 许可证发布