Bulma Dashboard is extension for the Bulma CSS framework that enables you to easily write dashboard-style interfaces with fixed horizontal panels.

The Bulma Dashboard extension is available as an npm package:

npm install bulma-dashboard

You can also download or link to the Sass or CSS files directly.

All functionality is used inside of the dashboard class, which is intended to take up the entire page. Here's an example:

<div class="dashboard is-full-height">
  <!-- left panel -->
  <div class="dashboard-panel is-one-quarter">
  </div>

  <!-- main section -->
  <div class="dashboard-main is-scrollable">
    <nav class="navbar is-fixed-top">
      <div class="navbar-brand">
        <span class="navbar-item">
          Bulma Dashbaord
        </span>
      </div>
    </nav>

    <section class="section">
      <p class="title">
        Main
      </p>
    </section>

    <!-- the footer will take up all unused space at the bottom -->
    <footer class="footer">

    </footer>
  </div>

  <!-- right panel -->
  <div class="dashboard-panel is-small">
  </div>
</div>

You can see an example page in docs/index.html. Here's a screenshot:

You can visit that page here.

If you add a Bulma footer in the dashboard main section, it will "stick" to the bottom and fill up all remaining space.

There are a variety of widths available for panels:

By default, panels are 25rem wide. You can change that default using the $dashboard-default-panel-width variable.

You can add the is-scrollable class to any element to make it scrollable.

You can add the has-thick-padding class to a panel to bulk up the padding to double the default.