Bulma: What is the best way to create an administration template ?

[Wikiki]

Hi,

I'm asking myself what is the best way to create a classic Administration theme using bulma ?
The goal is to have:

• 1 top nav bar
• one left menu (full-height)
• 1 content area

Like the example on this screenshot

Can you please give me your opinion about the 2 ways below:

1. Create one root full-height hero with hero-head including nav component and hero-body including 2 columns (one for the left administration multi-level menu including the Menu component and one column for the content)

2. Add Nav component as first root element and 2 columns as second root component (one for the left administration multi-level menu including the Menu component and one column for the content)

Don't hesitate to propose other option or improvement.

Kind regards

[v9n]

Here is my own opinion.

When I take a step back, and look at these kind of dashboard, they are very bloated to me. At first place, the reason I use Bulma because I feel it is simple enough to get started without bloating thing that I rarely use(I know I can select individual component but still).

So I tried to go with a minimal design for dashboard. I found a good example of dashboard design is DigitalOcean. Their dashboard is very clean and get expose per step instead of bloating it with everything.

This is how I designed my dashboard [1]

I have a top navigation. And each page sections may or may not have its own horizontal sub navigation like bulna docs.

I opts for this design because I think when using horizontal menu, it limits my space and makes me thing about what I can put in there with only some core things.

---

[Wikiki]

Hi @kureikain,

thank you for your feedback. I agree with you about the simplicity and I really like your design. But my concern is : what about an application which can handle a lot of modules, then a lot of root links into the menu ? I'm afraid that in this way there is not enough space on top (even by splitting them into root links and sublinks).

Regards,

[IlanF]

The most basic dashboard layout could be something like this:

<nav class="nav">
  <!-- top nav menu -->
</nav>
<div class="section">
  <div class="columns">
    <aside class="column is-2">
      <nav class="menu">
        <!-- sidebar menu -->
      </nav>
    </aside>
    <main class="column">
      <!-- main content area -->
    </main>
  </div>
</div>

Here is a full example

The menu is not full height but can be with some CSS tweaks, same with the main content area.

[Wikiki]

Hi @IlanF

Thank you for this simple layout and the example.

Why using a hero for the top navbar ?

Regards

[IlanF]

No particular reason, I just liked the way it looked better...
You can remove the .hero and only use the .nav if you don't intend to use the hero-title/subtitle / colors.

[Wikiki]

Thanks for your feedback.

One last question: How to manage the sidebar menu on tablet and mobile to display it using the "burger icon" instead of displaying it at the top of the page ?

Or maybe there is a better way to handle this than the "burger icon".

[Wikiki]

Up

Do you know how to create a full-height template :

• Fix top navbar
• Side menubar with vertical scroll
• Right page content with independent scroll

Regards

[Wikiki]

We are proud to announce the first premium administration template on CreativeBulma :-D.
try it at: https://demo.creativebulma.net/hexalight