Wagtail CMS: How to Create a Custom Wagtail Menu System

Almost every website has some form of navigation. Wagtail websites are no different. But creating a menu isn't as easy as making top level pages (although that's an option!). In this tutorial we're going to explore how to create a Menu System using a Clusterable Model, Oderable, Snippet, and a custom template tag.. from scratch!
We'll also learn how to:
* Create a custom template tag, and loop through all the menu items
* Create custom properties in our MenuItem class to perform logic for us, so our templates can stay clean
* And more...
Full Tutorial: learnwagtail.com/tutorials/ho...
Git Commit: github.com/CodingForEverybody...
Wagtail Menus Package: github.com/rkhleics/wagtailmenus #Wagtail #Django #Python

[@theflyingcrab2827]

You, sir, are awesome! I was never a fond of video tutorials before I watched yours. These are not fast, not slow, not loud, not feeble, not boring, not comic... everything is just perfect. Thanks much for all the efforts you are putting into these.

[@AyazAmlani]

i loved this lesson. I have been using djangos templating language and didnt know i could create templatetags so easily like that.

[@CodingForEverybody]

Oh yeah, nice and easy!!

[@mahmoudabdelmoneim786]

Awesome tutorials, you have a super great way to keep things simple. please keep it up, waiting for more. :)

[@CodingForEverybody]

Thanks for the kind words! Glad you're enjoying this series!

[@van3787]

I"m learning so much from this playlist, but this video especially, was very helpful Thank you Kalob

[@aaronbrown5558]

These are great videos. I've learned a TON.

[@sharifahmed1925]

Hi Kalob :) Hope you're well If I'm planning to use Django purely as an API and have React.js or Next.js handle all the Frontend, are there any benefits of using Wagtail instead of Django? Love to hear your thoughts

[@AlekseyFilippovHuzzah]

Maybe you have kind of advice for a complex menu design. Wagtailmenus is beyond consideration since they do not support api endpoints. By complex I mostly mean several layers of nesting. Should I compose the structure from the separate linear menus as you suggest at the end of the video?

[@tanveerahmed1040]

Thank You Please Keep it up Make more videos.

[@CodingForEverybody]

I have a few more planned for next week already! :D

[@asgeralia8802]

Superb superb superb

[@actionaticsdev8144]

I have the following problem with AutoSlugField, It converts my "title" and adds the convenient "-" and lower caps it, however it does not show it in real time as I type the title. Can anybody help me? Thanks

[@BenLamptey]

i think i might be having a caching issue here. I can't get the menu items to display even though i've copied it word for word. However i do notice the menu items do appear in my template when i comment out "{% extends base_template %}" which is the first line in my template - however i need this extension as it contains header, footer etc

[@hadiboukdir386]

Hi, First of all thank you very much for this tutorial. Just wondering is there a way to make the selected page in the menu 'Active' ? same as you did at the pagination! Thank you again

[@hadiboukdir386]

Just want to let you know that I figured out how to fix it. {{ item.title }}

[@CodingForEverybody]

@@hadiboukdir386 Exactly what I was going to suggest. Great job, and thanks for sharing the answer here!

[@tanveerahmed1040]

How can We add Blog Category in menus and render those categories in template currently using snippets for categories then how categories should be create and add in menus, LIKE WE DO in Wordpress.Thank You.

[@joaogoncalves4525]

hey, is it possible to loop the clisterableModel and then loop the ordarable?

[@ryanmorris5709]

How can one mix in drop-down-links with this menu? Can you have an orderable in an orderable? or maybe use stream-fields in here instead?

[@CodingForEverybody]

You could do both, theoretically. An orderable inside an orderable would would But if you need a more complex menu look into wagtailmenus as it'll do what you're looking for out of the box: github.com/rkhleics/wagtailmenus

[@magdagaj]

Hi, yet another great tutorial, however.. If I allow my client to create/rename/delete menus and the name of the menu is hardcoded in the base template ({% get_menu "main" as navigation %}), the whole navigation wont work.

[@CodingForEverybody]

Yep, that's a flaw in this method. You can also change the template tag to look for the first menu, or use an id, etc.

[@lakhumeghani239]

How to created custom object "Snippet" between setting and documents. I want to know how to create custom object like snippet or any other say "News". If related link please share. Thanks in advance

[@magdagaj]

I used ModelAdmin and logic form Subscribers tutorial to add Menus to the admin panel rather than to Snippets. It works for me.

[@bckstrtby200]

How to have child_item in the main menu?

[@markkos2426]

I'm getting the error "DoesNotExist at /about/ Menu matching query does not exist." menus_tags.py seems to not inherit Menu properly do you know how I can fix that? I'm at the point where I just copied your code and it still won't work Vscode also gives me this error : "Attempted relative import beyond top-level packagepylint(relative-beyond-top-level)" when I'm trying to import Menu

[@CodingForEverybody]

Do you have all the right packages installed? You can install the packages I'm using with `pip install -r requirements.txt`

[@boasorte6808]

Seriously, how do you remember and know all the classes, functions, and syntax? How do you know exactly what you need from so much documentation?

[@douglasalves1155]

Hello, I have a little beginner problem :- D , could you help me? I got to the 23:42 part of the lesson, but I need the page link to redirect to an internal link on the page itself, for example: Products I filled in "#products" in the link url field, but it didn't work. Thanks a lot!

[@CodingForEverybody]

Hey Douglas, instead of using a link to a Page, you could add a CharField for the internet link (ie #products) and use an if/else to detect if the link is internal or external.

[@douglasalves1155]

Humm... Nice :D. It's my first time using CMS and I dont know many things in django, I'm doing everything on the basis of stubbornness, kkkkkk. Thanks

[@patricksarmiento4494]

does this work for a headless wagtail setup? i assume not?

[@CodingForEverybody]

No you'll need to expose the menu system through your API manually.

[@CodingForEverybody]

Though you can filter by pages that have `show in menu` checked with the default Wagtail pages API

[@cheryl_jones]

Thanks for the tutorial - it's really helpful. Though, I could not for the life of me get AutoSlugField to work.