# Bulma v0.4.4: a modern CSS framework based on Flexbox
Bulma v0.4.4 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Navbar

## A responsive horizontal navbar that can supports images, links, buttons, and dropdowns

New! 0.4.3

The new `navbar` replaces the deprecated `nav` component, whose documentation you can still access temporarily here.

The `navbar` component is a responsive and versatile horizontal navigation bar with the following structure:

- `navbar` the main container
  - `navbar-brand` the left side, always visible, which usually contains the logo and optionally some links or icons
    - `navbar-burger` the hamburger icon, which toggles the navbar menu on touch devices
  - `navbar-menu` the right side, hidden on touch devices, visible on desktop
    - `navbar-start` the left part of the menu, which appears next to the navbar brand on desktop
    - `navbar-end` the right part of the menu, which appears at the end of the navbar
      - `navbar-item` each single item of the navbar, which can either be a `a` or a `div`
        - `navbar-link` a link as the sibling of a dropdown, with an arrow
        - `navbar-dropdown` the dropdown menu, which can include navbar items and dividers
          - `navbar-divider` a horizontal line to separate navbar items

    <nav class="navbar ">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://bulma.io/versions/0.4.4">
          <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>

        <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
          <span class="icon" style="color: #333;">
            <i class="fa fa-github"></i>
          </span>
        </a>

        <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
          <span class="icon" style="color: #55acee;">
            <i class="fa fa-twitter"></i>
          </span>
        </a>

        <div class="navbar-burger burger" data-target="navMenuExample">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navMenuExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item " href="http://bulma.io/versions/0.4.4/">
            Home
          </a>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link  is-active" href="/versions/0.4.4/documentation/overview/start/">
              Docs
            </a>
            <div class="navbar-dropdown ">
              <a class="navbar-item " href="/versions/0.4.4/documentation/overview/start/">
                Overview
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/">
                Modifiers
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/grid/columns/">
                Grid
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/form/general/">
                Form
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/elements/box/">
                Elements
              </a>

                <a class="navbar-item is-active" href="http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/">
                  Components
                </a>

              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/layout/container/">
                Layout
              </a>
              <hr class="navbar-divider">
              <div class="navbar-item">
                <div>
                  <p class="has-text-info is-size-6-desktop"><strong>0.4.4</strong></p>

                    <small>
                      <a class="view-all-versions" href="/versions">View all versions</a>
                    </small>

                </div>
              </div>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link " href="http://bulma.io/versions/0.4.4/blog/">
              Blog
            </a>
            <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">

                <a class="navbar-item" href="/2017/03/10/new-field-element/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">10 Mar 2017</small>
                    </p>
                    <p>New field element (for better controls)</p>
                  </div>
                </a>

                <a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">11 Apr 2016</small>
                    </p>
                    <p>Metro UI CSS grid with Bulma tiles</p>
                  </div>
                </a>

                <a class="navbar-item" href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">09 Feb 2016</small>
                    </p>
                    <p>Blog launched, new responsive columns, new helpers</p>
                  </div>
                </a>

              <a class="navbar-item" href="http://bulma.io/versions/0.4.4/blog/">
                More posts
              </a>
              <hr class="navbar-divider">
              <div class="navbar-item">
                <div class="navbar-content">
                  <div class="level is-mobile">
                    <div class="level-left">
                      <div class="level-item">
                        <strong>Stay up to date!</strong>
                      </div>
                    </div>
                    <div class="level-right">
                      <div class="level-item">
                        <a class="button is-rss is-small" href="http://bulma.io/versions/0.4.4/atom.xml">
                          <span class="icon is-small">
                            <i class="fa fa-rss"></i>
                          </span>
                          <span>Subscribe</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <div class="navbar-link">
              More
            </div>
            <div id="moreDropdown" class="navbar-dropdown ">
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/extensions/">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <p>
                        <strong>Extensions</strong>
                        <br>
                        <small>Side projects to enhance Bulma</small>
                      </p>
                    </div>
                  </div>
                  <div class="level-right">
                    <div class="level-item">
                      <span class="icon has-text-info">
                        <i class="fa fa-plug"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
            Github
          </a>
          <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
            Twitter
          </a>
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <a id="twitter"
                  class="button"
                  data-social-network="Twitter"
                  data-social-action="tweet"
                  data-social-target="http://bulma.io/versions/0.4.4"
                  target="_blank"
                  href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.4.4&via=jgthms">
                  <span class="icon">
                    <i class="fa fa-twitter"></i>
                  </span>
                  <span>Tweet</span>
                </a>
              </p>
              <p class="control">
                <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.4.4.zip">
                  <span class="icon">
                    <i class="fa fa-download"></i>
                  </span>
                  <span>Download</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </nav>

### Navbar brand

The `navbar-brand` is the left side of the navbar. It can contain:

- a number of `navbar-item`
- the `navbar-burger` as last child

    <nav class="navbar">
      <div class="navbar-brand">
        <!-- navbar items, navbar burger ... -->
      </div>
    </nav>

The navbar brand is always visible: on both touch devices < 1008px and desktop >= 1008px . As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.

    <nav class="navbar">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://bulma.io/versions/0.4.4">
          <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>

        <div class="navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </nav>

On desktop >= 1008px , the navbar brand will only take up the space it needs.

### Navbar burger

The `navbar-burger` is a hamburger menu that only appears on mobile. It has to appear as the last child of `navbar-brand`.

    <div class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </div>

You can add the modifier class `is-active` to turn it into a cross.

### Navbar menu

The `navbar-menu` is the counterpart of the navbar brand. As such, it must appear as a direct child of `navbar`, as a sibling of `navbar-brand`.

    <nav class="navbar">
      <div class="navbar-brand">
        <!-- navbar items, nav burger ... -->
      </div>
      <div class="navbar-menu">
        <!-- navbar start, navbar end -->
      </div>
    </nav>

The `navbar-menu` is hidden on touch devices < 1008px . You need to add the modifier class `is-active` to display it.

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

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

On desktop >= 1008px , the `navbar-menu` will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:

- `navbar-start`
- `navbar-end`

### Navbar start and navbar end

The `navbar-start` and `navbar-end` are the two direct and only children of the `navbar-menu`.

On desktop >= 1008px :

- `navbar-start` will appear on the left
- `navbar-end` will appear on the right

Each of them can contain any number of `navbar-item`.

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

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

### Navbar item

A `navbar-item` is a repeatable element that can be:

- a navigation link

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

- a container for the brand logo

      <a class="navbar-item">
        <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" width="112" height="28">
      </a>

- the parent of a dropdown menu

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

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

- a child of a navbar dropdown

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

- a container for almost anything you want, like a `field`

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

It can either be an anchor tag `<a>` or a `<div>`, as a direct child of either:

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

### Transparent navbar

To seamlessly integrate the navbar in any visual context, you can add the `is-transparent` modifer on the `navbar` component. This will remove any hover or active background from the navbar items.

    <nav class="navbar is-transparent">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://bulma.io/versions/0.4.4">
          <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>

        <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
          <span class="icon" style="color: #333;">
            <i class="fa fa-github"></i>
          </span>
        </a>

        <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
          <span class="icon" style="color: #55acee;">
            <i class="fa fa-twitter"></i>
          </span>
        </a>

        <div class="navbar-burger burger" data-target="navMenuTransparentExample">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navMenuTransparentExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item " href="http://bulma.io/versions/0.4.4/">
            Home
          </a>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link  is-active" href="/versions/0.4.4/documentation/overview/start/">
              Docs
            </a>
            <div class="navbar-dropdown is-boxed">
              <a class="navbar-item " href="/versions/0.4.4/documentation/overview/start/">
                Overview
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/">
                Modifiers
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/grid/columns/">
                Grid
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/form/general/">
                Form
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/elements/box/">
                Elements
              </a>

                <a class="navbar-item is-active" href="http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/">
                  Components
                </a>

              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/documentation/layout/container/">
                Layout
              </a>
              <hr class="navbar-divider">
              <div class="navbar-item">
                <div>
                  <p class="has-text-info is-size-6-desktop"><strong>0.4.4</strong></p>

                    <small>
                      <a class="view-all-versions" href="/versions">View all versions</a>
                    </small>

                </div>
              </div>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link " href="http://bulma.io/versions/0.4.4/blog/">
              Blog
            </a>
            <div id="blogDropdown" class="navbar-dropdown is-boxed" data-style="width: 18rem;">

                <a class="navbar-item" href="/2017/03/10/new-field-element/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">10 Mar 2017</small>
                    </p>
                    <p>New field element (for better controls)</p>
                  </div>
                </a>

                <a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">11 Apr 2016</small>
                    </p>
                    <p>Metro UI CSS grid with Bulma tiles</p>
                  </div>
                </a>

                <a class="navbar-item" href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">09 Feb 2016</small>
                    </p>
                    <p>Blog launched, new responsive columns, new helpers</p>
                  </div>
                </a>

              <a class="navbar-item" href="http://bulma.io/versions/0.4.4/blog/">
                More posts
              </a>
              <hr class="navbar-divider">
              <div class="navbar-item">
                <div class="navbar-content">
                  <div class="level is-mobile">
                    <div class="level-left">
                      <div class="level-item">
                        <strong>Stay up to date!</strong>
                      </div>
                    </div>
                    <div class="level-right">
                      <div class="level-item">
                        <a class="button is-rss is-small" href="http://bulma.io/versions/0.4.4/atom.xml">
                          <span class="icon is-small">
                            <i class="fa fa-rss"></i>
                          </span>
                          <span>Subscribe</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <div class="navbar-link">
              More
            </div>
            <div id="moreDropdown" class="navbar-dropdown is-boxed">
              <a class="navbar-item " href="http://bulma.io/versions/0.4.4/extensions/">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <p>
                        <strong>Extensions</strong>
                        <br>
                        <small>Side projects to enhance Bulma</small>
                      </p>
                    </div>
                  </div>
                  <div class="level-right">
                    <div class="level-item">
                      <span class="icon has-text-info">
                        <i class="fa fa-plug"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
            Github
          </a>
          <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
            Twitter
          </a>
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <a id="twitter"
                  class="button"
                  data-social-network="Twitter"
                  data-social-action="tweet"
                  data-social-target="http://bulma.io/versions/0.4.4"
                  target="_blank"
                  href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.4.4&via=jgthms">
                  <span class="icon">
                    <i class="fa fa-twitter"></i>
                  </span>
                  <span>Tweet</span>
                </a>
              </p>
              <p class="control">
                <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.4.4.zip">
                  <span class="icon">
                    <i class="fa fa-download"></i>
                  </span>
                  <span>Download</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </nav>

### Dropdown menu

To create a dropdown menu, you will need 4 elements:

- `navbar-item` with the `has-dropdown` modifier
- `navbar-link` which contains the dropdown arrow
- `navbar-dropdown` which can contain instances of `navbar-item` and `navbar-divider`

    <nav class="navbar">
      <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.4.4
          </div>
        </div>
      </div>
    </nav>

#### Show/hide the dropdown with either CSS or JavaScript

The `navbar-dropdown` is visible on touch devices < 1008px but hidden on desktop >= 1008px . How the dropdown is displayed on desktop depends on the parent's class.

The `navbar-item` with the `has-dropdown` modifier, has 2 additional modifiers

- `is-hoverable`: the dropdown will show up when hovering the parent `navbar-item`
- `is-active`: the dropdown will show up all the time

While the CSS `:hover` implementation works perfectly, the `is-active` class is available for users who want to control the display of the dropdown with JavaScript.

    <nav class="navbar">
      <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.4.4
          </div>
        </div>
      </div>
    </nav>

    <nav class="navbar">
      <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.4.4
          </div>
        </div>
      </div>
    </nav>

#### Styles for the dropdown menu

By default, the `navbar-dropdown` has:

- a grey `border-top`
- a `border-radius` at both bottom corners

Documentation

Everything you need to create a website with Bulma

    <nav class="navbar">
      <a class="navbar-item">
        <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a 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.4.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>

When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the `is-boxed` modifier.

- the grey border is removed
- a slight inner shadow is added
- all corners are rounded
- the hover/active state is animated

Documentation

Everything you need to create a website with Bulma

    <nav class="navbar is-transparent">
      <a class="navbar-item">
        <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a 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.4.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>

#### Active dropdown navbar item

Documentation

Everything you need to create a website with Bulma

    <nav class="navbar">
      <a class="navbar-item">
        <img src="http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a 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.4.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>

#### Dropdown divider

You can add a `navbar-divider` to display a horizontal rule in a `navbar-dropdown`.

    <hr class="navbar-divider">

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!