Image base navigation with modx wayfinder menu

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx (modxcms.com). In this tutorial i will explore how we can use or create image based modx wayfinder menu, we can create or generate standard ul based menu calling wayfinder snippet and than style this menu using css, but sometime we don’t require standard ul base menu or ul list with images in, so below are the steps following we can create image base menu.

Step - 1

Create a template variable name it “menuImage” and attached to your desired or active template set the values use the following settings - ‘Input Type: Image’ and ‘Widget: Image’.

Step - 2

Edit your home page assign any desired image to menuImage TV.

Step - 3

In your active template call wayfinder snippet with rowtpl and outertpl papamater for detail about paramater please visit this site MuddyDogPaws

Step - 4

For your rowtpl chunk use this chunk
[+menuImage+]
[+wf.wrapper+]

Your are Done

View your page in browser and you will see image in place of your home link, create css to indent the link text, we can also do it using only classes and using rowtpl chunk wf.docid wf.classes together in rowtpl chunk now you will have known classes name like 1nav, 2nav where 1 and 2 are page id’s so hard code it in css create class name 1nav and add background attribute to this class you are done if you guys facing any difficulty please write in comment hopefully i will answer within day or with in hour