场景：不用汉堡图标也能打开 Offcanvas
Bricks 里做全高侧滑菜单（Offcanvas）通常用两个元素配合：Offcanvas（侧滑面板本体）和 Toggle（汉堡按钮）。Toggle 点击后滑出 Offcanvas，开箱即用。
但很多设计里并不想要汉堡图标：可能是「查看购物车」文字链接、一个风格化的 Button，或者干脆是自定义 Div（比如图片、图标组合）。能不能让这些元素也能触发 Offcanvas？
可以。秘诀只有一个：给它们加上 brxe-toggle 这个类。这是 BricksLabs 免费教程给出的做法，无需任何 JS 和 PHP。
Step 1：给自定义元素加 brxe-toggle 类
以 Button 元素为例：
-
在页面里放置一个 Button（或文本链接、Div）。
-
选中它，在 STYLE → CSS → CSS classes 输入框里添加
brxe-toggle。
加完后点这个按钮，绑定的 Offcanvas 就会像被 Toggle 点击了一样滑出。
注意类名要加在触发元素上，而不是 Offcanvas 上。另外，brxe-toggle 这个类可以加在 active class（元素激活时）输入框里，也可以加在 CSS classes 里。作者推荐后者——放 CSS classes 里不会意外生成任何针对该类的样式，纯粹只起「行为标记」作用。
Step 2：多个 Offcanvas 用 data-selector 指定目标
页面上有多个 Offcanvas（比如左侧菜单一个、右侧购物车一个）时，Bricks 怎么知道点哪个按钮开哪个面板？
在 brxe-toggle 之外，再给触发元素加一个 data-selector 属性，值为目标 Offcanvas 的 HTML ID 或 class：
<!-- 触发按钮：只打开 id 为 my-cart-offcanvas 的面板 -->
<button class="brxe-toggle" data-selector="#my-cart-offcanvas">打开购物车</button>Bricks 的前端脚本会读取 data-selector，把点击事件绑定到指定 Offcanvas。没有 data-selector 时，默认就近关联页面中的 Offcanvas 元素。
原理说明
-
brxe-toggle是 Bricks 的约定类名：Toggle 元素本身渲染出来就带这个类，Bricks 的 JS（bricks.min.js）监听所有带brxe-toggle的元素，点击时触发 Offcanvas 的展开/收起并同步aria-expanded。所以给任何元素加上这个类，就等价于「借用了 Toggle 的行为」，但完全不继承汉堡图标的样式。 -
data-selector：Bricks Offcanvas 支持通过该属性指定关联面板的选择器，用于多实例场景，避免「页面上只有一个 Offcanvas」的默认就近匹配逻辑失效。 -
为什么推荐加在 CSS classes 而非 active class：active class 是元素处于激活态时追加的类，语义是「样式钩子」；CSS classes 则纯粹是静态类名。把行为标记类放 CSS classes，样式和行为互不污染，误伤风险最小。
相关阅读：
小结
「加类」是 Bricks 最常见的扩展开关：brxe-toggle 把任意元素变成 Offcanvas 触发器，data-selector 解决多面板定向。整个过程零代码、纯构建器操作。同理，Bricks 里很多内置交互都靠约定类名驱动，掌握了这套机制，就能组合出官方没直接提供的交互方式。
常见误区
用 brxe-toggle 时有几个点要注意：一是多个 Offcanvas 一定要用 data-selector 指准目标，否则所有触发器都会打开第一个面板；二是别给会嵌套在 Offcanvas 里的元素也加 brxe-toggle，容易触发自己；三是无障碍和键盘可访问性——纯自定义 Div 触发没问题，但记得给面板配好关闭方式和焦点管理，别让用户关不掉。至于汉堡图标，它只是 Toggle 元素的默认外观，想换成文字链接或图片，本质都是同一个触发器机制。
常见问题（FAQ）
Q：一定要用汉堡图标才能开 Offcanvas 吗？
A：不用，给任意元素加 brxe-toggle 类就能变成触发器，文字链接、按钮、图片都行。
Q：多个 Offcanvas 怎么区分？
A：用 data-selector 指定目标面板的 CSS 选择器，否则默认开第一个。
Q：自定义 Div 触发会影响无障碍吗？ A：机制本身没问题，但记得给面板配好关闭和焦点管理，保证键盘可操作。
延伸阅读
- 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
- 相关阅读：Bricks Setup Guide
延伸阅读
Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）
实战技巧：Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）——css 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tips零代码：ACF Repeater 子字段值做成 Bricks Tabs 标签页
实战技巧：零代码：ACF Repeater 子字段值做成 Bricks Tabs 标签页——acf 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tipsBricks Tabs 自动轮播：滚动到可视区后自动切换标签页
实战技巧：Bricks Tabs 自动轮播：滚动到可视区后自动切换标签页——tabs 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。
tips手风琴展开项自动滚动到可视区（解决内容跳动问题）
实战技巧：手风琴展开项自动滚动到可视区（解决内容跳动问题）——accordion 实操步骤+踩坑提醒，适合外贸独立站与 WordPress 开发者。