COMPONENT 03 · Navigation & Orientation

导航抽屉

Navigation Drawer

也叫Nav DrawerHamburger Menu抽屉菜单汉堡菜单

从屏幕边缘滑入并临时呈现导航选项的面板。

A temporary navigation panel that slides in from a screen edge.

ANATOMY & USAGE

结构与使用建议

组成部分

菜单触发器
遮罩层
导航面板

适合使用

小屏需要节省空间但仍要访问全局导航时。

不建议使用

主导航只有两三个项目且可直接显示时。

键盘与无障碍

触发器维护 aria-expanded/aria-controls；打开后管理焦点，Escape 关闭并恢复焦点。

DESCRIBE IT TO AI

这样告诉编程助手

实现导航抽屉（Navigation Drawer）：从屏幕边缘滑入并临时呈现导航选项的面板。

MINIMAL RUNNABLE CODE

可复制代码

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

READ ONLY · SAFE TO COPY

<div class="demo">
  <button id="drawer-trigger" type="button" aria-expanded="false" aria-controls="nav-drawer">打开导航</button>
  <div class="drawer-backdrop" hidden>
    <nav id="nav-drawer" class="drawer" aria-label="主导航">
      <button id="drawer-close" type="button">关闭导航</button>
      <a href="#home" aria-current="page">首页</a>
      <a href="#projects">项目</a>
      <a href="#settings">设置</a>
    </nav>
  </div>
</div>