COMPONENT 01 · Navigation & Orientation

导航栏

Navigation Bar

也叫NavbarTop BarApp Bar顶部栏

固定在页面顶部或显眼位置，承载品牌、主导航与全局操作。

A prominent bar that holds branding, primary navigation, and global actions.

ANATOMY & USAGE

结构与使用建议

组成部分

品牌区
主导航链接
全局操作

适合使用

产品需要在主要区域之间持续切换时。

不建议使用

单一任务页没有跨区导航时。

键盘与无障碍

使用 nav 与清晰的 aria-label，并用 aria-current 标记当前页面。

DESCRIBE IT TO AI

这样告诉编程助手

实现导航栏（Navigation Bar）：固定在页面顶部或显眼位置，承载品牌、主导航与全局操作。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<nav class="demo row" aria-label="主导航">
  <a href="/" aria-label="Acme 首页">
    <strong>Acme</strong>
  </a>
  <a href="#overview" aria-current="page">概览</a>
  <a href="#components">组件</a>
  <button id="account-menu" type="button" aria-label="打开账户菜单">WX</button>
  <output>尚未打开全局操作</output>
</nav>