10up
Update Navigation Component
Is your feature request related to a problem? Please describe.
While creating a website using the navigation component, I found I needed to spend a lot of time adding code to get it working. There were also some issues with classes being added to the wrong elements with no way to change this without changing the core code completely.
After inquiring, I found that some developers using the component would normally have to add code on top of the navigation, and I feel a lot of time can be saved if some more options existed for a broader range of scenarios, while still remaining lightweight.
Here were some of the issues I encountered:
Navigation Button Element ONLY opens the navigation. The menu element when clicked, only opens the ul element inside a nav. In many cases the menu button might need to open the nav itself or a wrapper div that might hold many menus or other elements. It would be nice to choose what the menu button opens.
No need for a menu toggle In some cases you may have a menu that is in the sidebar and does not require a menu toggle at all. It just needs some javascript to open and close submenus on click. I think there should be a choice as to whether a menu toggle is needed to begin with.
OnSubMenuOpen callback does not pass a parameter of the submenu element opened The callback functions don't have any params passed that would be helpful, especially the submenu function. We need the submenu that was opened to be passed here.
Desktop Submenus offscreen Sometimes when using a large submenu, the submenu might go offscreen (see image below). I think checking for offscreen submenus and adding a class to fix it might be helpful.
submenu element Sometimes .sub-menu might not be the class to target as submenus. I think we need a way to choose the selector for sub-menu elements and not rely on the default ways WordPress spits out the menu. We sometimes use custom walkers to change things.
CSS Issues
- The css that ships with the component only works and expects to work with only one menu with a class of primary-menu.
- The css is also set to display: none / block for most elements and I think that should be left to the developer to decide.
- Currently submenus only disappear once the JS is loaded, because the css is relying on javascript to show/hide. This means submenus show up for a second before disappearing.
- The css also doesn't apply basic styles one would expect like
list-style-type: none;on the ul element, but it does include styles one may need to remove, like adding a plus icon to submenu items.
The Fix
Describe the solution you'd like
https://github.com/10up/component-library/pull/49
I have actually created a solution by remaking the navigation, fixing all the items listed above. In the new navigation I have:
- Added the option to have a menu toggle element only if you want one. The aria-controls on this element will decide what element will get toggled. It can be set to any element ID on page.
- Multiple menus can be made, each with a different media query size. The menu will go horizontal and vertical based on this query with a toggled class.
- All callbacks have parameters
- Option for submenu selector. Defaults to .sub-menu
- Submenus receive a class of offscreen right or left for desktop menus when applicable
- CSS affects all menus that have a class of .js-menu
- Added hover events for top level items on desktop only
- Small fallbacks for when there is no-js
side note: I noticed this latest version in develop does not come with a dist folder... Does that mean... What does that mean? How will they link to the dist of the style file? or the dist of the src file if they want to?