使用Bulma构建响应式导航栏只需四个步骤：1. 用.navbar创建基础结构，包含品牌标识、菜单按钮和链接；2. 通过JavaScript控制汉堡菜单的展开与收起，实现移动端适配；3. 应用is-primary、is-dark等类自定义颜色与样式，结合is-fixed-top实现顶部固定；4. 使用.has-dropdown和.is-hoverable添加下拉菜单，支持桌面悬停与移动端点击。

使用Bulma构建导航栏既简单又高效。Bulma是一个基于Flexbox的现代css框架，无需JavaScript即可实现美观、响应式的导航布局。以下是实现导航栏的关键组件与响应式技巧。

1. 基础导航栏结构

Bulma通过 .navbar 类创建导航栏，包含品牌标识、菜单按钮和导航链接。基础结构如下：

<nav class=”navbar”>
  <div class=”navbar-brand”>
    <a class=”navbar-item” href=”/”>Logo</a>
    <a class=”navbar-burger” data-target=”navMenu”>
      <span></span><span></span><span></span>
    </a>
  </div>
  <div class=”navbar-menu” id=”navMenu”>
    <div class=”navbar-start”>
      <a class=”navbar-item” href=”/home”>首页</a>
      <a class=”navbar-item” href=”/about”>关于</a>
    </div>
    <div class=”navbar-end”>
      <a class=”navbar-item” href=”/login”>登录</a>
      <a class=”navbar-item” href=”/signup”>注册</a>
    </div>
  </div>
</nav>

.navbar-brand 用于放置Logo或应用名称，.navbar-menu 包含实际导航项，.navbar-start 和 .navbar-end 控制菜单项左右分布。

2. 响应式汉堡菜单（移动端适配）

Bulma自动在小屏幕上隐藏菜单，但需要JavaScript控制汉堡按钮展开/收起。添加以下脚本启用交互：

立即学习“前端免费学习笔记（深入）”；

<script>
document.querySelectorAll(‘.navbar-burger’).foreach(burger => {
  burger.addEventListener(‘click’, () => {
    const target = document.getElementById(burger.dataset.target);
    burger.classlist.toggle(‘is-active’);
    target.classList.toggle(‘is-active’);
  });
});
</script>

当屏幕变小时，.navbar-menu 会折叠，点击汉堡图标时通过 .is-active 类显示菜单。确保 data-target 与菜单ID一致。

3. 自定义样式与颜色

Bulma提供预设颜色类，可快速美化导航栏：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• navbar is-primary：蓝色主题
• navbar is-dark：深色背景
• navbar is-transparent：透明背景（适合全屏背景图）

例如：

<nav class=”navbar is-dark is-fixed-top”>

结合 is-fixed-top 可让导航栏固定在顶部，滚动时保持可见。

4. 添加下拉菜单

使用 .has-dropdown 实现下拉功能：

<div class=”navbar-item has-dropdown is-hoverable”>
  <a class=”navbar-link”>产品</a>
  <div class=”navbar-dropdown”>
    <a class=”navbar-item” href=”/product1″>产品一</a>
    <a class=”navbar-item” href=”/product2″>产品二</a>
  </div>
</div>

添加 is-hoverable 可在桌面端悬停触发，移动端需点击。

基本上就这些。Bulma的语义化类名和Flexbox布局让导航栏开发变得直观，配合少量JS即可完成完整响应式体验。