Creating a nav bar using bulma

[louisstephens]

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>
                </a>
            </div>

            <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>
                        </div>
                    </div>
                    <a class="navbar-item">Gallery</a>
                    <a class="navbar-item">Contact Us</a>
                </div>
                
            </div>
        </nav>
    </section>

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

Home

--Services

----Subpage

----Subpage

----Subpage

----Subpage

--Gallery

--Contact Us

 

[BillH]

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:
https://processwire.com/talk/topic/12953-simple-navigation/?do=findComment&comment=117536

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.

[elabx]

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.  

[mel47]

Hello,

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