导航条（Navbar）

一款自适应的横向导航条（navbar）——支持图像、链接、按钮和下拉菜单

自适应的、横向多功能的导航条（navbar）组件结构如下：

navbar 是主容器
- navbar-brand 是左边栏，总是可见的，通常包含标志和可选的链接或者图标
  - navbar-burger是一个汉堡图标，用来在触屏设备上切换 navbar 菜单
- navbar-menu 是右边栏，在触屏设备上隐藏，桌面设备上可见
  - navbar-start 是菜单的左边部分，在桌面系统上会紧挨着导航条的标志部分
  - navbar-end 是菜单的右边部分，会出现在导航条的尾部
    - navbar-item 是导航条的每一个独立的项目，既可以是 a 也可以是 div
      - navbar-link 是一个包含相邻元素的带有箭头的下拉菜单链接
      - navbar-dropdown 是包含导航条项目和分割线的下拉菜单
        
        navbar-divider 是分隔导航条项目的水平线

想要快速上手？这有一个完整的基础 Navbar 代码：

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://railsway.cn/bulma">
      <img src="https://railsway.cn/bulma/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

导航条标牌（brand） #

navbar-brand 是导航栏的左栏，包括：

一些 navbar-item
做为最后一个子项目的 navbar-burger

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
</nav>

导航条标牌是一直可见的：不管是在触摸设备 < 1024px 还是在桌面系统 >= 1024px 都可见。所以，推荐使用项目较少的的导航条以避免在小的设备上水平方向溢出屏幕外。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://railsway.cn/bulma">
      <img src="https://railsway.cn/bulma/images/bulma-logo.png" alt="Bulma：自由、开源和现代的基于 Flexbox 构建的 CSS 框架" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
</nav>

在桌面系统 >= 1024px 上，导航条标牌会根据其大小占位相应空间。

导航条 Burger #

navbar-burger 是一个仅在触摸设备上显示的汉堡标志（明明是汉字的“三”形状，结果说是汉堡形状）菜单。平时只显示一个子项 navbar-brand。它还包含三个为了使汉堡的横线标志或者十字（激活时显示）可视化的空的 span 标记

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

您可以添加 is-active 修饰符类，它就会变成斜十字。

navbar-menu 与导航条标牌是互相对应的。所以，它是 navbar 的直接子元素，与 navbar-brand 同级。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

navbar-menu 在触屏设备 < 1024px 上是隐藏的。如果您想显示需要添加 is-active 修饰符类。

<div class="navbar-menu">
  <!-- hidden on mobile -->
</div>

<div class="navbar-menu is-active">
  <!-- shown on mobile -->
</div>

在桌面系统 >= 1024px 上，navbar-menu 会充满导航条上除导航条标牌外的所有空间。根据需要，可以直接使用两个元素做为子元素：

navbar-start
navbar-end

Javascript 开关

Bulma 包不包含任何 JavaScript。
这是一个普通的 Javascript 扩展示例——专门用来开关不管是 navbar-burger 还是 navbar-menu 的 is-active 类的。

<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navMenu">
  <!-- navbar-start, navbar-end... -->
</div>

document.addEventListener('DOMContentLoaded', () => {

  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {

      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });

});

这还有另一个扩展示例——这是使用 JQuery 来实现的开关 navbar-burger 和 navbar-menu 的 is-active 类的。

$(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});

记住，这只是扩展示例。Bulma 包不包含任何 JavaScript。

navbar-start 和 navbar-end 是 navbar-menu 的两个直系子元素。

桌面系统上 >= 1024px :

navbar-start 会在左侧显示
navbar-end 会出现右侧

它们每一项都可以包含任意个 navbar-item。

<div class="navbar-menu">
  <div class="navbar-start">
    <!-- navbar items -->
  </div>

  <div class="navbar-end">
    <!-- navbar items -->
  </div>
</div>

navbar-item 是一个可重复的元素，它可以是：

一个导航链接
```
<a class="navbar-item">
  Home
</a>
```

一个标志的容器

<a class="navbar-item">
  <img src="https://railsway.cn/bulma/images/bulma-logo.png" width="112" height="28" alt="Bulma">
</a>

一个下拉菜单的父元素

<div class="navbar-item has-dropdown">
  <a class="navbar-link">
    Docs
  </a>

  <div class="navbar-dropdown">
    <!-- Other navbar items -->
  </div>
</div>

一个导航条下拉菜单的子元素

<div class="navbar-dropdown">
  <a class="navbar-item">
    Overview
  </a>
</div>

一个可包万物的容器，如一个 field

<div class="navbar-item">
  <div class="field is-grouped">
    <p class="control">
      <a class="button">
        <span class="icon">
          <i class="fas fa-twitter" aria-hidden="true"></i>
        </span>
        <span>Tweet</span>
      </a>
    </p>
    <p class="control">
      <a class="button is-primary">
        <span class="icon">
          <i class="fas fa-download" aria-hidden="true"></i>
        </span>
        <span>Download</span>
      </a>
    </p>
  </div>
</div>

它也可以是一个锚点（anchor）标签 <a> 或者一个 <div>，做为以下元素的直系子元素：

navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown

您可以添加下列修饰符类：

is-expanded 用来将其转换为全宽度元素
is-tab 可以添加一个底边框——鼠标指针悬空时和使用 is-active 修饰符时出现

透明导航条 #

要无缝集成导航条到任何上下文中，您可以添加 is-transparent 修饰符到 navbar 组件上。这将移除导航条项的所有悬停和激活时的背景色。

示例

HTML

<nav class="navbar is-transparent">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://railsway.cn/bulma">
      <img src="https://railsway.cn/bulma/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-burger" data-target="navbarExampleTransparentExample">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navbarExampleTransparentExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="https://railsway.cn/bulma/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="https://railsway.cn/bulma/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/overview/modifiers/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://railsway.cn/bulma/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item is-active" href="https://railsway.cn/bulma/documentation/components/breadcrumb/">
            Components
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
              <span class="icon">
                <i class="fab fa-twitter"></i>
              </span>
              <span>
                Tweet
              </span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

固定位置导航条 #

现在您可以固定导航条到页面的顶部或底部，只需两步：

添加 is-fixed-top 或 is-fixed-bottom 修饰符到 navbar 组件
```
<nav class="navbar is-fixed-top">
```
添加对应的 has-navbar-fixed-top 或 has-navbar-fixed-bottom 修饰符到 <html> 或 <body> 元素提供适当的页面边距
```
<html class="has-navbar-fixed-top">
```

试一试！

显示底部导航条

下拉菜单 #

创建一个下拉菜单，需要 4 个元素：

带有 has-dropdown 修饰符的 navbar-item
含有下拉箭头的 navbar-link
含有 navbar-item 和 navbar-divider 实例的 navbar-dropdown

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

用 CSS 或 JavaScript 显示/隐藏下拉菜单

navbar-dropdown 在触屏设备 < 1024px 上可视但在桌面系统 >= 1024px 隐藏。但是下来菜单在桌面系统的显示依赖于父元素的类。

带有 has-dropdown 修饰符的 navbar-item 有 2 个扩展修饰符

is-hoverable：下拉菜单在光标悬停在其父元素 navbar-item 上时显示
is-active：下拉菜单一直显示

CSS :hover 扩展运行完美， is-active 类对于那些想要使用 JavaScript 来控制下拉菜单的用户很有用。

<div class="navbar-item has-dropdown is-hoverable">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<div class="navbar-item has-dropdown is-active">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

右侧开始的下拉菜单

如果您的父级 navbar-item 在右侧，您可以用 is-right 修饰符指定下拉菜单从右侧开始。

<div class="navbar-dropdown is-right">
  <!-- navbar-item, navbar-divider etc. -->
</div>

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Left
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Right
        </a>

        <div class="navbar-dropdown is-right">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

上拉菜单

如果您是在底部使用导航条，例如底部固定导航条，您可能需要上拉菜单，只需给父级 navbar-item 添加 has-dropdown 和 has-dropdown-up 修饰符即可。

<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
  <a class="navbar-link" href="https://railsway.cn/bulma/documentation/overview/start/">
    Docs
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item" href="https://railsway.cn/bulma/documentation/overview/start/">
      Overview
    </a>
  </div>
</div>

Documentation

Everything you need to create a website with Bulma

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown has-dropdown-up is-active">
        <a class="navbar-link">
          Dropup
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

无箭头下拉菜单

您可以通过给导航条项添加 is-arrowless 修饰符来移除项目的箭头。

<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Docs
  </a>
  <!-- navbar-dropdowns -->
</div>

<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Link without arrow
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item">
      Overview
    </a>
    <a class="navbar-item">
      Elements
    </a>
    <a class="navbar-item">
      Components
    </a>
    <hr class="navbar-divider">
    <div class="navbar-item">
      Version 0.9.4
    </div>
  </div>
</div>

下拉菜单样式

navbar-dropdown 默认情况下有：

一个灰色的 border-top
两个底角为 border-radius

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://railsway.cn/bulma/images/bulma-logo.png"
      alt="Bulma：自由、开源和现代的基于 Flexbox 构建的 CSS 框架"
      width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

当使用透明导航条时，推荐通过使用 is-boxed 修饰符使用下拉菜单的盒（boxed）版本。

灰色边框被移除
添加了一个很轻的内阴影
所有角为圆角
悬停/激活状态为动画

Documentation

Everything you need to create a website with Bulma

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://railsway.cn/bulma/images/bulma-logo.png"
      alt="Bulma：自由、开源和现代的基于 Flexbox 构建的 CSS 框架"
      width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown is-boxed">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

激活的下拉菜单导航条项

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://railsway.cn/bulma/images/bulma-logo.png"
      alt="Bulma：自由、开源和现代的基于 Flexbox 构建的 CSS 框架"
      width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item is-active">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

下拉菜单分割线

您可以在一个 navbar-dropdown 上添加一个 navbar-divider 修饰符来显示水平线。

<hr class="navbar-divider">

颜色 #

New! 0.5.2

您可以通过使用 9 个颜色之一的修饰符来改变 navbar 的背景色：

is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white

<nav class="navbar is-primary">
  <!-- navbar brand, navbar menu... -->
</nav>

导航条辅助类 #

类型	名字	简介
间距	`is-spaced`	设置顶端和底端内边距为 1rem，左边和右边内边距为 2rem
阴影	`has-shadow`	在导航条周围添加一点边框阴影

Variables #

Name

Type

Value

Computed Value

Computed Type

$navbar-background-color

variable

$scheme-main

hsl(0, 0%, 100%)

color

$navbar-box-shadow-size

size

0 2px 0 0

$navbar-box-shadow-color

variable

$background

hsl(0, 0%, 96%)

color

$navbar-height

size

3.25rem

$navbar-padding-vertical

size

1rem

$navbar-padding-horizontal

size

2rem

$navbar-z

string

$navbar-fixed-z

string

$navbar-item-color

variable

$text

hsl(0, 0%, 29%)

color

$navbar-item-hover-color

variable

$link

hsl(229, 53%,  53%)

color

$navbar-item-hover-background-color

variable

$scheme-main-bis

hsl(0, 0%, 98%)

color

$navbar-item-active-color

variable

$scheme-invert

hsl(0, 0%, 4%)

color

$navbar-item-active-background-color

string

transparent

$navbar-item-img-max-height

size

1.75rem

$navbar-burger-color

variable

$navbar-item-color

$navbar-tab-hover-background-color

string

transparent

$navbar-tab-hover-border-bottom-color

variable

$link

hsl(229, 53%,  53%)

color

$navbar-tab-active-color

variable

$link

hsl(229, 53%,  53%)

color

$navbar-tab-active-background-color

string

transparent

$navbar-tab-active-border-bottom-color

variable

$link

hsl(229, 53%,  53%)

color

$navbar-tab-active-border-bottom-style

string

solid

$navbar-tab-active-border-bottom-width

size

3px

$navbar-dropdown-background-color

variable

$scheme-main

hsl(0, 0%, 100%)

color

$navbar-dropdown-border-top

size

2px solid $border

$navbar-dropdown-offset

size

-4px

$navbar-dropdown-arrow

variable

$link

hsl(229, 53%,  53%)

color

$navbar-dropdown-radius

variable

$radius-large

6px

size

$navbar-dropdown-z

string

$navbar-dropdown-boxed-radius

variable

$radius-large

6px

size

$navbar-dropdown-boxed-shadow

shadow

0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)

$navbar-dropdown-item-hover-color

variable

$scheme-invert

hsl(0, 0%, 4%)

color

$navbar-dropdown-item-hover-background-color

variable

$background

hsl(0, 0%, 96%)

color

$navbar-dropdown-item-active-color

variable

$link

hsl(229, 53%,  53%)

color

$navbar-dropdown-item-active-background-color

variable

$background

hsl(0, 0%, 96%)

color

$navbar-divider-background-color

variable

$background

hsl(0, 0%, 96%)

color

$navbar-divider-height

size

2px

$navbar-bottom-box-shadow-size

size

0 -2px 0 0

$navbar-breakpoint

variable

$desktop

960px + (2 * $gap)

computed

$navbar-colors

variable

$colors

Bulma colors

map

此页面为开放源码页面。发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

导航条（Navbar）

基础 Navbar #

导航条标牌（brand） #

导航条 Burger #

Navbar 菜单 #

Javascript 开关

Navbar 始和 Navbar 终 #

Navbar 项 #

透明导航条 #

固定位置导航条 #

试一试！

下拉菜单 #

用 CSS 或 JavaScript 显示/隐藏下拉菜单

右侧开始的下拉菜单

上拉菜单

无箭头下拉菜单

下拉菜单样式

激活的下拉菜单导航条项

下拉菜单分割线

颜色 #

导航条辅助类 #

Variables #

支持 Bulma 😃

导航条（Navbar）

基础 Navbar #

导航条标牌（brand） #

导航条 Burger #

Navbar 菜单 #

Javascript 开关

Navbar 始和 Navbar 终 #

Navbar 项 #

透明导航条 #

固定位置导航条 #

试一试！

下拉菜单 #

用 CSS 或 JavaScript 显示/隐藏下拉菜单

右侧开始的下拉菜单

上拉菜单

无箭头下拉菜单

下拉菜单样式

激活的下拉菜单导航条项

下拉菜单分割线

颜色 #

导航条辅助类 #

Variables #

支持 Bulma 😃

简讯 功能、版本、展柜……实时新闻滚动发布！

简讯功能、版本、展柜……实时新闻滚动发布！