Creating a ModX website part 9: The nav bar

Pretty much every website will need a nav bar and so this post will show you how to implement one in ModX.

This site already has a nav bar that scrolls to the relevant part of the page. For the purposes of this post we are going to alter that nav bar so that each person you have a page for is displayed instead.

If you have been following along with this series then you will already have at least one home page, one other person page and a thank you page. If not you will want to create extra pages for other people so that the menu will work correctly.

Getting started creating a nav bar in ModX

Like everything else we will start with some HTML and CSS which you can already see in the existing site.

We also need to install an Extra called Wayfinder which will create the menus for us based on the pages on the Resources tab.

To do this click on Extras on the left - hand bar then click on Installer. Now click on Download Extras, then on Wayfinder and finally on Download.

Once the download is complete click on Back to package management then under Wayfinder click on Install. In the dialog that appears click on Continue and then on OK.

Setting up Wayfinder

We now need to seperate out some of the existing nav bar code so that Wayfinder can create the relevant parts when needed.

To do this first create a new Chunk called navul and paste the following code into it

<ul class="navbar-nav ms-auto [[+wf.classnames]]">[[+wf.wrapper]]</ul>

This will be used by Wayfinder to set up the unordered list used for the menu. [[+wf.classnames]] allows ModX to insert other classnames in if it needs to. [[+wf.wrapper]] will insert the individual rows (or menu items) in to the menu.

Now create another chunk called navli and add the following code

<li class="nav-item mx-0 mx-lg-1 [[+wf.classnames]]"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="[[+wf.link]]" title="[[+wf.linktext]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Some of the above will be familar from the navul code above. The [[+wf.link]] part will add the URL that links to this page and the [[+wff.linktext]] part will display the text associated with that link (i.e. the page title).

Now return to your navbar chunk which should look like this:

        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
                <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

You should now replace the whole unordered list section (from <ul ...> to < /ul> inclusive) with the following line

[[!Wayfinder? &startId=`0` &level=`1` &rowTpl=`navli` &outerTpl=`navul`]]

Now test your site and you will see that the menu has changed to display the different pages you have set up under the Resources tab.

Tweaking the menu

If you have been following along with the whole of this series you will now have a link to a thank you page in your menu. Obviously, this is not what you want.

To get rid of this go to your Resources tab, click on the Thank You page and turn on the Hide From Menus option on the right - hand side. Once saved have another look at your site. The thank you page should now be gone.

Conclusion

We have only covered the very basics of Wayfinder here. If you would like to tweak if further and get a better understanding of what it does and how it works visit Wayfinder.

This is also the end of the series on how to create a website using HTML, CSS, JS and ModX. Further articles will follow but will not be a part of this series.