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
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.
||25rem||The default panel width if no size modifier is added|
||1.5rem||The padding in panels|
Documentation needs to explain how to include stylesheet
README.mddid not result in a working page layout for me.
I have a Vue.js app with Bulma and Buefy working via
The only way I could get
bulma-dashboardto work is by visiting the example page at https://lucperkins.github.io/bulma-dashboard/index.html and inspecting the document and copy-pasting the
bulma-dashboard.cssinto a local stylesheet in my project.
What would be the correct way to make the stylesheet contained in the NPM package work?
@import "~/bulma-dashboard.css";but this did nothing.
[FeatureRequest] Show/Hide menu
Thanks for putting this together - I ended up converting it to scss to match my existing setup but it worked well.
Do you have plans to provide a way to show/hide the side panel on a click/class mainly so I can show/hide it on mobile.
By default, your example also hides the navbar on mobile which can be a pain!
When trying the example dashboard provided in the docs folder, the layout was not as showed by your example page. For example, the scroll bars were missing and the sidebars were not filling the entire page. It turned out that the bulma-dashboard.min.css provided in the dist folder is different from the one provided in the docs folder. Can you please inform me why there is a diference?
Constrain fixed-top navbar properly in Safari
Thanks for making this extension -- filling a longstanding common need in Bulma.
I found in Safari (both MacOS and iOS) the fixed-top navbar (from the example.html) would render across the whole page obscuring elements instead of being constrained to the
I don't think
position: stickyworks in Safari without adding a prefix so the fix was as easy as adding
position: -webkit-sticky... now it renders perfectly.
It seems that the example here (https://lucperkins.github.io/bulma-dashboard/) is a little broken.
Displayed with Firefox 71.0 and Chromium Version 78.0.3904.108