工具条
Toolbar
别名:工具条工具栏操作栏快捷操作那一排toolbartool bar
这是什么
把作用于当前视图或选中项的操作按钮压成一条横向（偶尔纵向）控件带，按功能分组并用分隔线 划分。工具条管「动作」，菜单管「选项」，站点导航管「去哪」。典型如编辑器的加粗 / 斜体排版条、 图片查看器的旋转下载条、列表页的批量操作条。
名词辨析
工具条（Toolbar）是动作按钮的集合，按钮点了就执行；菜单条（Menubar）是菜单入口的集合， 点开后还要在列表里再选一次；导航条（Navbar）是站点或应用的目的地入口，点击会改变路由或 页面。看「点完之后发生什么」：执行动作 → 工具条；展开选项 → 菜单；换页面 → 导航。
交互实验室
试一试，再决定怎么用用键盘在工具条按钮间左右移动，触发几个动作，观察当前选中态。
正在加载实验室…
使用时关注什么
- 01同组按钮语义分组，整条只占一个 Tab 站点
- 02切换型按钮暴露按下 / 弹起状态
✓ 适用场景
- 对当前视图或选中项有一组高频动作（格式化、批量操作）
- 动作需要常驻可见、一次点击即达
- 图标足以表达含义，可省略文字标签
✕ 不适用场景
- 动作低频或有争议（收进溢出菜单或更多按钮）
- 用户要从固定选项中选一个（那是菜单或 select）
- 负责全站目的地跳转（那是 navbar 或 sidebar）
常见形式
图标工具条
Icon toolbar
纯图标按钮，悬浮提示补语义
排版工具条
Formatting toolbar
加粗 / 斜体 / 对齐等富文本动作，带激活态
上下文工具条
Contextual toolbar
仅在选中内容时出现，离开即隐藏
实现要点
flexgapborder-radiusbackgroundtransition容器 role="toolbar" + aria-label，内部按功能分组，分组用 role="group" + aria-label， 分隔符是 aria-hidden 的 1px 竖线。键盘用 roving tabindex：整条只占一个 Tab 站点， 组内左右方向键移动（纵向条用上下），Home / End 跳两端。切换型按钮用 aria-pressed。 窄屏允许换行或收进溢出菜单。
平台 API
role="toolbar"aria-labelroving tabindex代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件替代方案点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用容易混淆
导航条跳转目的地；工具条执行当前上下文的动作。
菜单点开后再选一项；工具条按钮点击即执行。