组件

Navbar 顶栏

顶栏导航：小屏 pvs-nav-open 展开动效、pvs-navbar__search 搜索 slot；链接 :focus-visible 焦点环；大屏 hover 子菜单。

默认

收窄窗口后点 ☰，菜单带展开过渡

<header class="pvs-navbar">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">PivCSS</a>
    <button type="button" class="pvs-navbar__toggle" aria-label="菜单" aria-controls="demo-nav-panel" aria-expanded="false" data-pvs-nav-toggle>☰</button>
    <nav class="pvs-navbar__nav" id="demo-nav-panel">
      <ul>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link pvs-navbar__link--active" href="#">首页</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">文档</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">定价</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<p class="pvs-text-sm pvs-text-muted pvs-mt-2">收窄窗口后点 ☰，菜单带展开过渡</p>

折叠菜单

收窄窗口点击 ☰；需 aria-controls 指向 id。

小屏点击「菜单」展开 pvs-nav-open

<header class="pvs-navbar">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">折叠演示</a>
    <button type="button" class="pvs-navbar__toggle" aria-controls="demo-nav-collapse" aria-expanded="false" data-pvs-nav-toggle>菜单</button>
    <nav class="pvs-navbar__nav" id="demo-nav-collapse">
      <ul>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">链接 A</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">链接 B</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<p class="pvs-text-sm pvs-text-muted pvs-mt-2">小屏点击「菜单」展开 <code>pvs-nav-open</code>
</p>

二三级菜单

二级/三级：pvs-navbar__item--has-children + __submenu--depth3。

<header class="pvs-navbar">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">多级</a>
    <nav class="pvs-navbar__nav pvs-nav-open" id="demo-nav-sub">
      <ul>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">首页</a>
        </li>
        <li class="pvs-navbar__item pvs-navbar__item--has-children">
          <a class="pvs-navbar__link" href="#">产品</a>
          <ul class="pvs-navbar__submenu">
            <li class="pvs-navbar__item">
              <a class="pvs-navbar__link" href="#">PivCSS</a>
            </li>
            <li class="pvs-navbar__item pvs-navbar__item--has-children">
              <a class="pvs-navbar__link" href="#">PivUI</a>
              <ul class="pvs-navbar__submenu pvs-navbar__submenu--depth3">
                <li class="pvs-navbar__item">
                  <a class="pvs-navbar__link" href="#">Hero</a>
                </li>
                <li class="pvs-navbar__item">
                  <a class="pvs-navbar__link" href="#">定价条</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

Submenu keyboard (mobile)

小屏（<992px）Enter/Space 展开子菜单；Esc 收起。大屏仍 hover 展开。

收窄窗口后试：产品 → Enter 展开

<p class="pvs-text-sm pvs-text-muted pvs-mb-2">收窄窗口后试：产品 → Enter 展开</p>
<header class="pvs-navbar">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">键盘子菜单</a>
    <nav class="pvs-navbar__nav pvs-nav-open">
      <ul>
        <li class="pvs-navbar__item pvs-navbar__item--has-children">
          <a class="pvs-navbar__link" href="#" aria-haspopup="true">产品</a>
          <ul class="pvs-navbar__submenu">
            <li class="pvs-navbar__item">
              <a class="pvs-navbar__link" href="#">PivCSS</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

配合吸顶条

整段吸顶用 pvs-sticky-bar 包裹，见 Sticky 组件。

<div class="pvs-sticky-bar pvs-sticky-bar--shadow">
  <header class="pvs-navbar" style="border:0">
    <div class="pvs-container pvs-navbar__inner">
      <a href="#" class="pvs-navbar__brand">吸顶导航</a>
      <nav class="pvs-navbar__nav pvs-nav-open">
        <ul>
          <li class="pvs-navbar__item">
            <a class="pvs-navbar__link pvs-navbar__link--active" href="#">Tab</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</div>

深色导航

pvs-navbar--dark 深色顶栏，适合营销页或暗色 Hero 下方。

<header class="pvs-navbar pvs-navbar--dark">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">PivCSS</a>
    <nav class="pvs-navbar__nav pvs-nav-open">
      <ul>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link pvs-navbar__link--active" href="#">产品</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">文档</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">定价</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Search slot

规范 slot：pvs-navbar__search + pvs-navbar__search-form；大屏右对齐，小屏整行在菜单下方。

<header class="pvs-navbar">
  <div class="pvs-container pvs-navbar__inner">
    <a href="#" class="pvs-navbar__brand">站点</a>
    <button type="button" class="pvs-navbar__toggle" aria-controls="demo-nav-search" aria-expanded="false" data-pvs-nav-toggle>☰</button>
    <nav class="pvs-navbar__nav pvs-nav-open" id="demo-nav-search">
      <ul>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">首页</a>
        </li>
        <li class="pvs-navbar__item">
          <a class="pvs-navbar__link" href="#">博客</a>
        </li>
      </ul>
    </nav>
    <div class="pvs-navbar__search">
      <form class="pvs-navbar__search-form" role="search">
        <input class="pvs-input pvs-input--sm" type="search" name="q" placeholder="搜索…" aria-label="搜索" />
        <button type="submit" class="pvs-btn pvs-btn--primary pvs-btn--sm">搜</button>
      </form>
    </div>
  </div>
</header>

结构

header.pvs-navbar → div.pvs-navbar__inner → brand · toggle · nav.pvs-navbar__nav#id · 可选 div.pvs-navbar__search

数据属性

类名	说明
`data-pvs-nav-toggle`	切换移动菜单（nav 加 pvs-nav-open）

类名速查

类名	说明
`pvs-navbar`	顶栏根
`pvs-navbar__inner`	容器内 flex 行
`pvs-navbar__brand`	Logo / 站名
`pvs-navbar__toggle`	小屏菜单钮
`pvs-navbar__nav`	折叠面板（max-height 动效）
`pvs-navbar__search`	搜索 slot 容器
`pvs-navbar__search-form`	搜索表单 flex 行
`pvs-navbar__submenu`	二级菜单
`pvs-navbar__submenu--depth3`	三级右展
`pvs-navbar__item--has-children`	含子菜单
`pvs-navbar__link--active`	当前页
`pvs-navbar--dark`	深色顶栏
`pvs-nav-open`	移动菜单展开