Jump to content
Sign in to follow this  

Creating a nav bar using bulma

Recommended Posts

I have not really had to make a site from the ground up in quite a bit as I have been mainly focused on internal apps using processwire. However, I have now been tasked with creating a site and I was quite excited. I started down the path of using bulma as it seemed like a good fit. I got the whole site coded statically and was not moving on to porting it over to processwire. I pretty much have the the whole site figured out save for tackling the navbar. My current navbar is set up as so:

    <section id="nav">

        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item is-size-3 has-text-primary" href="#">Logo goes here</a>
                <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>

            <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-end">
                    <a class="navbar-item">Home</a>
                    <div class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link">Services</a>
                        <div class="navbar-dropdown">
                            <a class="navbar-item">Subpage</a>
                            <a class="navbar-item">Subpage</a>
                            <a class="navbar-item">Subpage</a>
                            <a class="navbar-item">Subpage</a>
                    <a class="navbar-item">Gallery</a>
                    <a class="navbar-item">Contact Us</a>

I guess my question is how would you go about setting this up in processwire? All pages will obviously be subpages of Home with the following structure








--Contact Us


Share this post

Link to post
Share on other sites

The basic method is to find the top level pages using a selector, then loop through those pages and their children, and children of children, etc.

I recommend starting here:

Note particularly the two really useful links in the response from kongodo.

It can be easiest to make a special case for the home page, and start your looping at the next level down.

  • Like 1

Share this post

Link to post
Share on other sites

I'd say the most intuitive way in ProcessWire is the approach @BillH mentions, I've sometimes also approached it using a repeater field, with with url, menu label and another repeater field for second level menus.  

  • Like 1

Share this post

Link to post
Share on other sites


I use this the Menu builder module. Easy and works very well. I'm also using bulma and was able to it without problem.

  • Like 2

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By anderson
      Please take a look at this:
      The upper nav bar, including dropdowns like "pages" and "portfolios", what do you call this whole thing? At first I guess it's called "dropdown nav bar", but seems not.
      AND of course, what's the simplest way/module to achieve this in PW?
      Thanks in advance.
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I was wondering if there is a way to restrict user navigation to specific pages.
      Login (home.php - not to be displayed)
          |__  About (not to be displayed)
          |__  Clubs (not to be displayed)
          |            |__ Club (to be displayed)
          |                       |__  Club Members (to be displayed)
          |__ League (not to be displayed)
          |            |__Season (not to be displayed)
          |                       |__  Match (not to be displayed)
          |__  News (blog.php -  to be displayed)
      etc, etc
      Based on the above the navigation needs to appear simply as:
                           Club    Club Members    News    
      Any thoughts appreciated.
    • By joe_ma
      Trying to setup a customized navigation.
      Page tree looks like this:
      – upcoming exhibitions
      –– exhibition 1
      –– exhibition 2
      –– …
      – about
      – archive
      –– arch 1
      –– arch 2
      –– …
      – impressum
      Now I'd like to have a navigation, that lists only the subnav of "upcoming exhibitions" but not the one of "archive".
      I modified a snippet I found here in the forum. It looks like this so far:
      <nav class="mainNav"> <ul> <?php $homepage = $pages->get('/'); // first item links to the homepage echo "<li><a href='$homepage->url'>Aktuelle Ausstellung / current exhibition</a></li>"; $children = $homepage->children(); // render an <li> for each top navigation item foreach ( $children as $child ) { if ( $child->id == $page->rootParent->id ) { // this $child page is currently being viewed (or one of it's children/descendents) // so we highlight it as the current page in the navigation echo "<li class='active'><a href='$child->url'>$child->title</a></li>"; // if upcoming page has children, list them } elseif($child->id == 1020 && count($child->children)){ // build the subnav and list all items echo "<li><a href='$child->url'>$child->title</a><ul class='upcoming'>"; foreach($child->children as $c){ echo "<li><a href='$c->url'>$c->title<br>{$c->date_from}–{$c->date_to}</a></li>"; } echo "</ul><li>"; // otherwise list only main items } else { echo "<li><a href='$child->url'>$child->title</a></li>"; } } ?> </ul> </nav> This puts out the navigation as wanted, but only for main items (see fig. nav-open.png).
      As soon as "upcoming exhibitions" or one of its children is active, the navigation collapses (see fig. nav-closed.png).
      I cannot find out, where I went the wrong way.
      Thanks for help.

    • By rareyush
      hi everyone
      I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.
      i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this
    • By JimSee
      FIRST: I am brand new and am trying to add a Navigation Tree to the beginner site. When I put renderNavTree($page, 4) into _head.php, I get a menu list like the graphic.
      This is great EXCEPT, I don't know how to make a horizontal menu out of it with CSS. Can someone help (please) or direct me to an example of the css?
      SECOND: That list is great for the Home page but when I click "program," the list only shows:

      How can I get the whole (visible) menu on every page?
      Thank you in advance! jim
  • Create New...