1. Bulma Navbar 的基本结构
在 Bulma 框架中，导航条（Navbar）作为顶部导航的核心组件，通常放在页面的顶部区域。它的典型结构由 navbar 容器承载，内部包含 navbar-brand、navbar-menu、navbar-start、navbar-end 等子区块，用于放置商标、导航项以及操作按钮等元素。
其中 navbar-burger 是在小屏幕下触发折叠的按钮，点击后需要切换 navbar-menu 的显示状态。通过正确的类名配合 JS 代码，可以实现响应式折叠效果，使桌面端和移动端具有不同的交互体验。
<nav class="navbar" role="navigation" aria-label="main navigation"><div class="navbar-brand"><a class="navbar-item" href="#">Brand</a><a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div id="navMenu" class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="#">首页</a><a class="navbar-item" href="#">文档</a><a class="navbar-item" href="#">关于</a></div><div class="navbar-end"><a class="navbar-item" href="#">登录</a></div></div>
</nav>
2. 结合 responsive 类实现可折叠导航栏
2.1 使用响应式工具类控制可见性
Bulma 提供了一组响应式工具类，例如 is-hidden-mobile、is-visible-desktop 等。利用这些类可以在桌面端保持完整导航栏，在移动端隐藏部分项目并通过按钮触发折叠效果，从而实现真正的响应式体验。
通过在导航项上应用 is-hidden-mobile，可以确保在移动设备上隐藏特定条目；相反，使用 is-hidden-desktop 可以在桌面端隐藏某些元素，便于把重点放在移动端的折叠交互上。
2.2 无缝切换的可访问性要点
实现折叠导航时，应为 navbar-burger 按钮添加无障碍属性，例如 aria-label、aria-expanded，并在点击时更新 aria-expanded 的布尔值，确保屏幕阅读器能够正确读出状态变化。
<nav class="navbar" role="navigation" aria-label="main navigation"><div class="navbar-brand"><a class="navbar-item" href="#">Brand</a><a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div id="navMenu" class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="#">首页</a><a class="navbar-item" href="#">文档</a></div></div>
</nav>
3. 实现步骤与示例
3.1 HTML 结构实例
以上示例给出了一个完整的 Bulma Navbar 基本结构，其中 navbar-burger 与 navbar-menu 的互相配合是实现折叠的核心。为了确保在移动端也能正常工作，建议将 data-target 指向需要切换的菜单区域的 id。
在实际项目中，可以将品牌区域和导航项进一步拆分成 navbar-start 和 navbar-end，以实现左侧导航和右侧操作的分离布局。
<nav class="navbar" role="navigation" aria-label="main navigation"><div class="navbar-brand"><a class="navbar-item" href="#">Brand</a><a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainMenu"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div id="mainMenu" class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="#">首页</a><a class="navbar-item" href="#">功能</a></div><div class="navbar-end"><a class="navbar-item" href="#">登录</a></div></div>
</nav>
3.2 JavaScript 实现可折叠逻辑
为了让按钮能够在移动端切换导航菜单的显示状态，需要加入一个简单的 JavaScript 逻辑：当 navbar-burger 被点击时，切换两个目标元素的 is-active 类，以实现折叠与展开。
document.addEventListener('DOMContentLoaded', () => {const burgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);if (burgers.length > 0) {burgers.forEach( burger => {burger.addEventListener('click', () => {const target = document.getElementById(burger.dataset.target);burger.classList.toggle('is-active');target.classList.toggle('is-active');// 同步 aria-expanded 状态const expanded = burger.getAttribute('aria-expanded') === 'true';burger.setAttribute('aria-expanded', String(!expanded));});});}
});
4. 常见实现细节与调试要点
确保 data-target 与 id 匹配是实现正确折叠的前提，若两者不一致则会导致点击无效。将 aria-expanded 与 is-active 同步，能提升无障碍性与用户体验。
在桌面端保持导航项的可见性，可以通过将部分导航项加上 is-hidden-mobile 之类的响应式类来实现，确保在桌面端完整呈现，在移动端折叠成按钮触发的形式。
5. 与 Bulma 其他组件的协同使用
将 Bulma Navbar 与下方的 Dropdown、Tabs、以及 Buttons 等组件搭配时，需注意层级结构的清晰和响应式行为的一致性。通过合理的类名与自定义 CSS，可以把折叠导航与搜索框、用户信息等控件无缝放置在同一导航区域内，提升整体的一致性与美观度。
总结性提示不在本文展开，但在实际项目中保持清晰的组件边界与可访问性，是实现稳定、可维护页面的关键。
