Drupal 10: How to create your main menu based on your categories

To create a main menu based on your content categories ("tags") here are the steps to take:

  • Define the categories you want to use  ("tags")
  • Tag your articles ('posts')
  • Add a menu item entry for the Tag to the main navigation

Drupal has the option to automatically create a page that lists all your posts with a specific tag; all you have to do is define the tag.  As far as I can tell,  'Tags' and 'Terms' are the same thing in Drupal... and I'm used to calling it 'categories' so please for now assume it all means the same.

Creating Categories: Tags

Screen shot showing the 'admin-structure' menu

Define the categories you want to use and add them via the 'Structure' menu and sub-item 'Taxonomy', then click on 'List Terms' on the right of the line item showing "Tags"

Screen shot of the Tags screen

The drop down next to 'edit fields' gives you more options including the option to 'add terms' but I usually want to see the list before adding a new one, to avoid duplicates.  So I click on 'list terms'

Screen shot showing the menu

which also gives the option to 'Add Term'.  Note that the drop down options for 'Operations' on the previous form are available again as tabs across the top of your form, with 'List' pre-selected.

Screen shot of List Terms

And of course the 'Add term' and 'Edit term' forms are the same layout.

Screen shot

You can use the 'Description' field to include a picture and any introduction you want to give for that Tag.  This will be displayed when you click on the menu and is the page that will show all posts with the specific Tag ("term).

For this particular picture, you'll want something wide but not too tall, so that there is room for the posts themselves on the page.

Make sure to add the URL alias so that you can add that to the menu, 'art-admiration' in this case.  Note that what is displayed as the menu for the user is what you select as the menu link title, but I've gotten myself into a lot of confusion by calling things slightly different in the article title, menu, tag, URL alias.... oh my.  Better to settle on something consistent ahead of time!   The URL alias is what you need when you create the menu item, so remember or copy it now.

 

Screen shot showing where to add the URL

Tagging your posts ('articles')

Pretty self-explanatory: add your tags to your posts - and you can have multiple tags for an article.

Screen shot of article with a tag

For the main picture with each posts, you'll want something small, and taller than wide, so that it can be displayed next to the preview of your post on the page that lists all posts with a specific tag.  
(of course, your theme may have a different layout, but this seems pretty consistent).

Add an entry to your main menu

You can find the options to create and edit your menu under 'Structure-Menus'.  Select 'main navigation' and then 'Add Link'

Note a couple of things:

  • You can enable and disable menu entries
  • You can create sub-menus (but my theme seems to struggle with them)
  • And you can see the naming inconsistency - my menu entry is called 'Art'.  Don't be like me!

when you edit the menu entry, you can add the link to the URL alias you added for your tag (see above):
 

Screen shot of edit menu

To sum up:

  • the menu will display the 'title'
  • and navigate to the 'URL alias'
  • and the menu 'Description' is what is displayed when you hover over the menu

Use the Parent link 'Main navigation' if you want your entry there, or choose any of your other menu items to create a sub-menu.  Use the 'Weight' field to provide a sorting order.   Again - thinking ahead is good here.  If you number your items sequentially, and you want to add a new entry in the middle - you now have to renumber all the entries to the right of your new entry - so good idea to create some gaps!  In hindsight, maybe I should have used '10', '20', etc...

Screen shot

Et Voila, your Main menu shows all the entries:

screen shot of the main menu

And if you click on a menu entry with a URL pointing to the URL for the tag, Drupal opens a page for you with :

  1. the description field you defined for your tag (image, text)
  2. a list of all articles that you tagged with this particular tag
screen shot showing the page with all the tagged articles

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.