bulma-js

The unofficial missing JavaScript library for Bulma websites.

Getting Started

<script src="dist/bulma-js.js"></script>
<script>
  bulmaJS.init();
</script>

Options

Toggle Functionality

bulmaJS.setConfig("bulma.burger", true);
bulmaJS.setConfig("bulma.dropdown", true);
bulmaJS.setConfig("dropdown", true);
bulmaJS.setConfig("window.collapse", true); // close dropdowns when clicked outside

Set Unique Element Id Prefix

bulmaJS.setConfig("bulmaJS.elementIdPrefix", "bulma-js-");

Set the "Initialized" Attribute Name

bulmaJS.setConfig("bulmaJS.initAttribute", "data-bulma-js-init");

Initialize Functionality on Entire Page

Can be called multiple times after page contents have changed.

bulmaJS.init();

Initialize Functionality on the Children of an Element

Helpful after populating an area with an AJAX call.

bulmaJS.init(document.getElementById("container-element"));

Features So Far

• Toggles appropriate Bulma classes and ARIA attributes.
• Close dropdown and navbar-dropdown elements when other parts of the webpage are clicked.

Navbar

https://bulma.io/documentation/components/navbar/

• Support for the navbar-burger element.
• Support for the navbar-dropdown elements.

Dropdown

https://bulma.io/documentation/components/dropdown/

• Support for the dropdown elements.

Alternative JavaScript Project

The BulmaJS project also provides JavaScript functionality for Bulma, and is far more complete than this project. I recommend you take a look if you need more functionality than is offered here.

This project goes in a different direction in a few ways.

• Prioritizes simple usage in an HTML script tag. No import or require necessary.
• TypeScript types available.
• Goes beyond just toggling the is-active Bulma classes, and manages ARIA attributes as well to increase accessibility.
• Attempts to correct common issues (i.e. missing roles, missing ids) that may affect accessibility.