水平导航栏（Navbar）

一个反应灵敏的水平导航栏，可以支持图像，链接，按钮和下拉列表

本节目录（点击直达）
1.基本导航栏
2.布兰达导航navbar-brand
3.汉堡菜单Navbar burger
4.导航栏菜单
5.导航栏开始和结束
6.菜单元素Navbar item
7.透明导航栏
8.固定导航栏
9.下拉菜单
10.右侧下拉菜单
11.上弹菜单
12.无箭头下拉列表
13.下拉菜单样式
14.激活下拉菜单项
15.下拉菜单分隔符
16.颜色
17.上下左右间距（padding）
18.变量

导航栏组件是一个具有以下结构的响应性和多功能水平导航栏：

navbar 主容器
- navbar-brand左侧，始终可见，通常包含logo徽标和一些可选的链接或图标
  - navbar-burger 汉堡图标，用于切换触摸设备上的navbar菜单
- navbar-menu导航栏菜单右侧，在触摸设备上隐藏，在桌面上可见
  - navbar-start 启动菜单，它出现在桌面上navbar-brand的左边
  - navbar-end 菜单的右侧部分，显示在navbar的末尾
    - navbar-item navbar项的每一项，可以是a或div
      - navbar-link 导航栏链接作为下拉列表的同级链接，带有箭头
      - navbar-dropdown 下拉菜单，可以包括code>navbar-item项和分隔符
        
        navbar-divider 分隔线分隔导航栏项目的水平线

1.基本导航栏

为了快速入门，以下是完整的基本导航栏的外观：

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/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">
          首页
        </a>
  
        <a class="navbar-item">
          文档
        </a>
  
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            更多
          </a>
  
          <div class="navbar-dropdown">
            <a class="navbar-item">
              关于
            </a>
            <a class="navbar-item">
              求职
            </a>
            <a class="navbar-item">
              联系
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              问题反馈
            </a>
          </div>
        </div>
      </div>
  
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>注册</strong>
            </a>
            <a class="button is-light">
              登录
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

2.布兰达导航navbar-brand

navbar-brand 位于navbar的左侧。它可以包含：

许多个navbar-item
最后一项是汉堡菜单 navbar-burger

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

navbar：在触摸设备上<1024px 和桌面上>=1024px，navbar brand始终可见。因此，建议只使用几个navbar项，以避免在小型设备上水平溢出。

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" 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，navbar brand只会占用它需要的空间。

3.汉堡菜单Navbar 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，则显示为X号。

4.导航栏菜单

导航栏菜单code>navbar-menu与navbar brand对应。因此，它必须作为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>

导航栏菜单隐藏在<1024px的触摸设备上。你需要添加修改符is-active来显示它。

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

在桌面上>=1024px，导航栏菜单将填满导航栏中的可用空间，留下navbar_brand所需的空间。它需要两个元素作为直接子项： he navbar brand just the space it needs. It needs, however, two elements as direct children:

navbar-start导航栏开始
navbar-end导航栏结束

Javascript toggle

Bulma包没有任何JavaScript。
这里是一个Vanilla 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);
  
    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 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。

5.导航栏开始和结束

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>

6.菜单元素Navbar item

菜单元素navbar-item 是菜单中最小的基本单位，也就是你要导航的最终链接，一般有多个，他有下面几种形式:

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

brand logo

<a class="navbar-item">
    <img src="https://bulma.io/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>

一个包含任何内容的容器, 例如表单

<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>

它可以是锚定标记<a> 或<div>

，也可以作为以下任一项的直接子项：

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

你可以添加以下修饰符类：

is-expanded 展开以将其转换为全宽元素
is-tab选项卡，用于在悬停时添加下边框，并使用显示处于活动状态is-active的下边框

7.透明导航栏

要在任何可视上下文中无缝集成navbar，可以在navbar组件上添加 is-transparent修饰符。这将从导航栏项目中删除任何悬停或活动背景。

Example

HTML

<nav class="navbar is-transparent">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/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://bulma.io/">
          Home
        </a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
            Docs
          </a>
          <div class="navbar-dropdown is-boxed">
            <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
              Overview
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/">
              Modifiers
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
              Columns
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
              Layout
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
              Form
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
              Elements
            </a>
            <a class="navbar-item is-active" href="https://bulma.io/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.1/bulma-0.9.1.zip">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                <span>Download</span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </nav>

8.固定导航栏

你可以将导航栏固定到页面的顶部或底部。这是一个两步实现过程：

在navbar添加 is-fixed-top 或 is-fixed-bottom 。
```
<nav class="navbar is-fixed-top">
```
将相应的has-navbar-fixed-top 或 has-navbar-fixed-bottom修饰符添加<html> 或 <body> 元素中，为页面提供适当的填充
```
<html class="has-navbar-fixed-top">
```

点击下面链接在新页面打开演示页

固定导航

9.下拉菜单

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

navbar-item 带has-dropdown 修饰符
navbar-link 带下拉箭头
navbar-dropdown 下拉菜单选项，包含 navbar-item 和 navbar-divider

<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.1
        </div>
      </div>
    </div>
  </nav>

用 CSS 或 JavaScript控制显示/隐藏下拉列表

navbar-dropdown 在移动设备分辨率 < 1024px时候显示，在桌面设备 >= 1024px隐藏。但是下拉列表在桌面设备如何显示取决于其父类。

带有 has-dropdown 修饰符的navbar-item有两个额外的修饰符：

is-hoverable:悬停父导航栏项时，将显示下拉列表
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.1
        </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.1
        </div>
      </div>
    </div>
  </nav>

Right dropdown

10.右侧下拉菜单

如果父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.1
            </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.1
            </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>

11.上弹菜单

如果您使用的是底部的导航，比如固定底部的导航，那么您可能需要使用上拉菜单。只需在父navbar-item的修饰符 has-dropdown后面增加has-dropdown-up修饰符。

<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
    <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
      Docs
    </a>
    <div class="navbar-dropdown">
      <a class="navbar-item" href="https://bulma.io/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.1
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

Dropdown without arrow

12.无箭头下拉列表

可以通过向导航栏的项添加“无箭头”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.1
      </div>
    </div>
  </div>

13.下拉菜单样式

默认 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://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" 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.1
        </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修饰符。

灰色框被移除
添加了轻微的内部阴影
所有的角都是圆的
悬停/活动状态已设置动画

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://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" 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.1
        </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>

14.激活下拉菜单项

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://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" 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.1
        </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>

15.下拉菜单分隔符

你可以在navbar-dropdown 添加navbar-divider 以显示一个水平分割线。

<hr class="navbar-divider">

16.颜色

New! 0.5.2

可以使用以下9个颜色修饰符更改导航栏的背景色：

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>

17.辅助类，上下左右间距

Type	Name	Description
Spacing	`is-spaced`	设置为 padding:1rem 2rem;或padding:1rem 2rem 1rem 2rem; （顺序上、右、下、左，即从头上开始按照顺时针转一圈）， 1rem等于html根元素设定的font-size的px值，也就是一个字宽度。

18.变量

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-strong

hsl(0, 0%, 21%)

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

返回头部

23222