Tutorial - Creating a reusable navigation component

HI All,
Feel free to ask any questions or to comment on the latest tutorial linked here: https://docs.pinegrow.com/tutorials/creating-reusable-navigation-component-in-multi-page-projects/


1 Like

This is the best video tutorial on PG components for single project. Very clear and straightforward with a keen focus on the functionality of the features covered, but the accent is a bit thin :slight_smile: i must say.

Looking forward to more details on the stuff you ran out of time to cover, like nested components which are currently vexing me pretty hard.

Also currently having difficulty with the backwards operation of converting an element into a component for reuse elsewhere. Would like too see that covered in a tutorial.

I was hoping this was going to cover Master Page functions, because you could have used that feature to quickly populate the other pages instead of dragging each library component item onto each page… but then you would have landed in the same nested component hell that i find myself at the moment.

Any light you can shed on my predicament would be greatly appreciated.

1 Like

Hey @droidgoo,
In the original version of my tutorial I was using Master pages, but Matjaz was concerned that it would make things a little too complicated. :slight_smile: In the future I’ll try to thicken my accent! Which one should I try? I’m thinking a knock-about kid from Yorkshire transplanted to the United States deep south.

As to your predicament- I’ve confirmed it and also confirmed that it is incorrect behavior. We are currently looking at getting it back to where it should be. It might go hand-in-hand with a slight problem with component locking in the latest version.

Not sure what you mean about, “Also currently having difficulty with the backwards operation of converting an element into a component for reuse elsewhere. Would like too see that covered in a tutorial.” Can you clarify?


1 Like

near the end, you talk about this bit:

Additionally, you can use Components to convert existing content to match your component. This is really useful when converting an existing page to a new design.

and i was trying to do exactly that with an existing nav menu when i encountered the nested component weirdness. Once that is sorted i would like to keep the nav menu as a component on the master page, but the only way i know to do that is to just delete the existing nav and replace it with my component version… but that would lose all my follower page edits like banner names and active status.

i would like to go the other way and feed my already tailored nav back into a component.

the nested component way was were i originally started, but couldn’t get the master page update to stop wiping my component back to square one every time a made a minor change to the master page.

the way you did it is probably the only way at the moment… i’m still using 5.96 btw

I’ve been following this tutorial and managed to get nearly everything to work in my project, thank you! The one thing that seems problematic with component navbars is the link to the page iteself.

I have a navbar on my main index page. If I link the page to itself, it won’t link. However, this means that when the component propogates through all the other pages, the link to the main index page does not work.

I’ve found a workaround by adding "../index.html" into the link, which isn’t strictly correct, but works and when the component is saved all the home links go correctly to the main index page.

Q: Is this how it is supposed to work, or am I missing something?