Jump to content

renderNavTree($page, 4)

Recommended Posts

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. MenuList.jpg.dbe0028af9fc26e767400419e142d0c9.jpg

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




Share this post

Link to post
Share on other sites

Hi @JimSee,

Welcome to the forums!

When you say that you are brand new, are you referring to ProcessWire, or to coding, or all of the above? :) To answer your question depends upon which css you want to use, as there are many to choose from. Google 'mobile first css grid' to get a selection (assuming you want your site viewable on different devices).  Whichever one you select will have examples of how to accomplish your desired menu. For example, here is a screenshot using bootstrap. (I'm not endorsing it, just using it as an example.)


Post back here if you have questions and someone will jump in and help with the coding.

Share this post

Link to post
Share on other sites

Thank you for your quick response, Rick. :) I am brand new to ProcessWire.  I am very familiar with html. I  can spell PHP and CSS. However, coding them is a different matter entirely. :o

As far as CSS for the navigation tree, I suspect that some one (or many) have used ProcessWire in this way...so an example or two would be great.

BIG Question: How do I get a complete (visible) menu on every page? I am using the function renderNavTree from the out-of-the box file _func.php (In other words, every page would have a menu like the one in the graphic in my first post...although the active page would have a different class.)

Thanks again to you, Rick...and to everyone who chooses to help! jim


Share this post

Link to post
Share on other sites

Hi Jim,

In my case I'm glad php is a palindrome. Ha!

I modified the rendernavtree function for my needs (shown below, using bootstrap) which produces the menu shown in the image I posted earlier. I've gone through and added comments that may help.

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            <a class="navbar-brand" href="<?php echo $pages->get('/')->url ?>"><img src="<?php echo $config->urls->templates ?>images/processwire.svg" alt="" /></a>
		<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
			// Get the top-level page
			$menuitems = $pages->get('/');
			// iterate through our top-level page and it's children
            foreach( $menuitems->and( $menuitems->children ) AS $item ) {
				if ( $user->isLoggedin() && strtolower($item->name) == "login" ) {
					echo '<li><a href="'.$pages->get('/logout/')->url.'">Logout</a></li>';
				} else {
	                if( $item->id == $page->id ) { // Is item our current page?
	                    echo "<li class='active'>";
	                } else {
	                    echo "<li>";
	                echo "<a href='$item->url'>".ucfirst($item->name)."</a></li>";
			echo "</ul>";
			if ( $user->isLoggedin() ) { // display logged in user
				echo '<p class="navbar-text navbar-right">Logged in as <a href="#" title="Profile">'.$user->name.'</a></p>';

When you create your pages, you can set one or more to be hidden, which won't show up in this menu list.

To get this (your) menu to display on every page, is as easy as including it in your php files. For example:

<div class="container">
	<?php include "./_navbar.php";

Is a segment of code that I use to include the menu on every page. This segment is placed in my _head.php file which is auto prepended to every page. See this topic for more information.

The following article has more general information...

site profile tutorial

There are also many great tutorials in the tutorial section written by the experienced ProcessWire members here. They are all worth a read. Also, check out the blog articles. I've found quite a few gems there.

Hope this helps.


Share this post

Link to post
Share on other sites
4 hours ago, rick said:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header">

Hello again, Rick:

Thank you for your help and patience with me! I tried your method and got a single layer menu...but i'm trying to get a nested menu. 

After a bit of trial & terror earlier, I added  <?php  $maxDepth = 4;
 renderNavTree($pages->get('/'), $maxDepth);?> to _head.php. Thus, I have menus like the image below on all my pages. (The only thing that changes from page to page is the current class...so I appear to be making some minor progress.)


Next, I need to figure out the CSS...plus an alternative that will render okay in phones....but that will be tomorrow.

Thanks again...and, if someone has another (complete) solution, please feel free to post it.


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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By 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
      --Contact Us
    • By Greg Lumley
      Hi! In busy learning to know PW better I'm looking at existing code.
      I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 
      <link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" /> I hope it's not a stupid question but I've never seen this before...
      main.css?ts=<?= time() ?> I notice the main template is empty but of course renders on the front end.
      Using a timestamp really has me totally confused. Can someone explain it to me please. 
      Thank you! 
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By picarica
      so i just downloaded this template  and i uploaded it to my server made some .php changes so it would work and stuff but all the css-transitions or css-animations don't work. they just stop
      if you checked out the template all those buttons are smooth and really nice, bit when you check out my site all those animations are gone, why is that? is there some option i have to toggle? or is it normal? how do i fix it ?
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
  • Create New...