The navbar plugin provides a range of different functionality for the Bulma navbar. By simply including the plugin you'll get the mobile navigation functionality, no configuration is required.
An example of this plugin is being used on this documentation!
Since 0.6.1 Bulma has provided a is-fixed-top class for the navbar, along with has-navbar-fixed-top for the html/body elements. This allows you to fix the navbar to the top of the page when scrolling. However, what if your navbar is not directly at the top? You need to be able to offset the sticky feature.
Since 0.7.0 BulmaJS has provided the functionality to do just this! First, specify the data-sticky attribute on your navbar. This will enable the event listener for scroll, by default the offset is set to 0 which does nothing extra than just adding the class to the element.
You can control the offset of the navbar using data-sticky-offset this access a number and is the number of pixels the user needs to scroll before the navbar sticks to the top.
You can also add data-sticky-shadow to your navbar element, this will add the has-shadow class to the navbar when it becomes sticky.
These are the events that this plugin emits when various actions happen. These can be listened to by using the on method.
| Name | Syntax | Description |
|---|---|---|
| Init | on('init') |
Called once the plugin has finished initialisation. |