Body
Learn how to properly create parent menu items for subsite sidebar navigation as a Super Editor updating the University of Southern Maine's public website . You must follow these guidelines for the menu to meet accessibility requirements.
Overview
If you want to use nested navigation items in your sidebar menu, you must take a few additional steps to create a parent menu item that functions properly and meets digital accessibility requirements . Only Super Editors can update your sidebar navigation menu, and each subsite must have at least one Super Editor.
How-to
Step 1: Log in to WordPress
Begin by logging into WordPress with your maine.edu credentials. Use the "My Sites" menu in the upper left corner of your screen to navigate to your subsite's "Dashboard".
Step 2: Go to the menu settings
In the panel on the left of the dashboard, hover your mouse over the "Appearance" menu item in the left panel, and select "Menus" from the pop-up menu.
Click on the image thumbnail to see the full-sized version.
Step 3: Select the subsite navigation menu
On the "Menus" screen, make sure "Subsite Navigation" is selected.
It's extremely important to make sure you're working on the correct menu before making any changes.
If "Subsite Navigation" is not the default selection, choose it from the drop-down menu and click the "Select" button.
Click on the image thumbnail to see the full-sized version.
Step 4: Enable the "CSS Classes" field
INFO: You should only need to complete this step once. WordPress will remember your settings across all the subsites you have access to. If you previously updated your
Screen Options settings,
skip to step 5 .
Look for the "Screen Options" tab at the top of your screen, and click it to expand that panel.
In the last row of checkboxes, tick the box next to "CSS Classes" to enable it. Then, click the "Screen Options" tab to hide the panel again.
Click on the image thumbnails to see the full-sized versions.
Step 5: Add a new custom link
On the left, under "Add menu items", click "Custom Link" to reveal its settings.
WordPress requires something to be entered in the "URL" field, so use # as a placeholder — we'll delete it later, in step 7.
Think of a parent menu item as a category heading that encompasses the overall theme of its child pages.
Add your menu item title in the "Link Text" field.
Navigation links should follow Title Case capitalization rules.
In the pictured example, we used "Parent Menu Item" for instructional clarity in this tutorial. Click on the image thumbnails to see the full-sized versions.
Step 6: Add child items
If you haven't added child menu items yet, do so now. Watch a video to learn how to update your menu .
Drag the child items below the parent item and make sure they're indented.
Step 7: Add a custom CSS class to a parent menu item
WARNING: This CSS class should only be added to parent menu items. Don't add it to child menu items or menu items without children — it will make them un-clickable.
Click the arrow icon on your parent menu item to reveal advanced settings. In the pictured example, we used "Parent Menu Item" and "Child Menu Item" for instructional clarity in this tutorial.
Delete the # placeholder you entered into the "URL" field in step 5.
There should be an empty "CSS Classes (optional)" field. If you don't have this field, go back to step 4 .
Copy the following text, exactly as it appears in the grey box below, and paste it into the "CSS Classes" field:
menu-no-click
Click on the image thumbnails to see the full-sized versions.
Step 8: Save your changes
Click the "Save Menu" button at the bottom of your screen to save your changes.
Once you see the "Subsite Navigation has been updated" message at the top of the page, you're all set!
To repeat this process for additional parent menu items, go back to step 5 .
Click on the image thumbnail to see the full-sized version.
Step 9: Check your work
Visit your subsite's front page to double-check your work.
When you hover your mouse over a parent menu item, a tooltip message that says, "Click to toggle sub-menu" should appear.
Test the functionality by clicking anywhere on the parent menu item to reveal its nested child menu items. Click on your parent menu item again to collapse (hide) the nested child items.
Click on the image thumbnails to see the full-sized versions.
Back to top
Digital accessibility information
When parent menu items in the sidebar navigation aren't set up correctly, screen readers and keyboard-only users can't access the child menu items.
Users with sight and a standard mouse can distinguish the link on the text from the arrow toggle that reveals the child menu items.
However, when screen readers reach the parent item, they can only access the link. Users with limited motor skills and/or a non-traditional mouse may struggle to click the arrow toggle and not the text link.
Mobile users may also struggle to tap the arrow toggle and not the text link due to screen or finger size.
When parent menu items in the sidebar navigation are set up correctly, clicking anywhere on the parent reveals its child items, instead of limiting the toggle action to just the arrow.
This allows sighted users, mobile users, screen readers, keyboard-only users, and users with limited motor skills equal access to the child menu items.
Click on the image thumbnails to see the full-sized versions.
The message in the bottom left corner of the screenshot displays closed captions for Apple's VoiceOver tool.
Back to top