A Responsive Navigation Proposal (for the Genesis Framework)

As I work on various projects, I keep circling around the idea of how best to implement a responsive navigation menu that just works for everyone. It’s been almost three years since I blogged about an accessible navigation menu, and I’m ready to revisit the topic.

Since that blog post, the responsive menu for the Genesis Sample theme has been drastically revised, but there are some pieces still missing, in my mind. The issues I want to see a great theme navigation menu solve are:

  1. honor skip links, no matter what child theme is used, and however many navigation menus the theme adds
  2. if a submenu is open, and then you open a different one, the first submenu closes
  3. combine multiple navigation menus into one, which makes mobile more manageable
  4. gracefully handle parent menu items which are not actually links on their own (usually the “link” is a #)
  5. behave consistently, regardless of screen size

The first two (1,2), I addressed in the last post on this topic, and they’ve been added into the Genesis Sample theme script and SuperSide Me (my own mobile menu plugin). The multiple navigation menus (3) into one is not in my last post, but is in Genesis Sample, and has always been part of SuperSide me. (4) has been addressed in SuperSide Me, but I don’t think anywhere else. And (5) has become my new golden ring to attempt to grab.

A Quick Note on Superfish

When the Genesis Framework added accessibility support, Superfish was the script of choice to make navigation menus accessible. However, we discovered that the best way to make an accessible mobile menu was to disable Superfish when the mobile menu is active. This has always been a bit of a puzzler for me, but it seemed the best way for it to work at the time.

The Differences Between Mobile and Desktop Menus

As things stand within Genesis–and not only within Genesis, but I’ve seen it in other themes as well, such as Twenty Seventeen–if a menu item has children, or a drop down menu, the difference between mobile and desktop behavior is pretty significant. Mainly, a submenu toggle button is added to the parent menu item. On mobile/small screens, clicking the button is how you open the dropdown/submenu. On desktop, or larger screens, those buttons are visually hidden. Some themes visually replace them with CSS, to show a submenu indicator; some themes do not.

I think that the visual indicator for a submenu should be in place regardless of screen size. The W3C recommendation is: “Indicate menu items with submenus visually and using markup.” So, let’s take that one as a given. It’s potentially a simple CSS issue. Twenty Seventeen adds the visual indicator as an SVG icon; this is another option.

My thought is that this isn’t a great way to do it, and it’s because of what I consider to be the more striking difference in behavior between mobile and desktop navigation, which is the behavior of how submenus are accessed, especially for users navigating with a keyboard. The relevant W3C comment:

Submenus should not open when using the tab key to navigate through the menu, as keyboard users would then have to step through all submenu items to get to the next top-level item.

Currently, the desktop menu behavior I’ve encountered doesn’t adhere to this, and, as far as I can tell, keyboard navigation users will have to go through every submenu item (and sub-submenu item) to get from one parent menu item to the next. We’ve solved this behavior on mobile. I’d like to solve it on desktop as well.

Re-Imagining Website Navigation Menus

I’d like to share with you what I’ve ended up doing. This post isn’t a tutorial so much, but a proposal with code. If you’d like to try it out for yourself, I’ve put all of my code together in a Github repository, as it’s easier to manage and update than a gist, and given instructions on the readme. Here’s the repository for the Leaven responsive navigation. The high points of what I’ve accomplished with this are:

  1. skip links are (still) honored
  2. only one submenu is open at a time
  3. on mobile, multiple navigation menus are combined
  4. parent menu items which are not links on their own are converted to submenu toggle buttons
  5. although they’re different visually, the mobile and desktop menu behavior is the same, or as close to it as possible
  6. if a mobile menu plugin is active, the theme mobile menu behavior can effectively and easily be disabled to reduce overhead/potential conflicts

So I’ve hit my five key criteria, and one more. The ones new to my approach are combining the menus on mobile (3): I’ve adapted the Genesis Sample approach there somewhat; parent menu items which aren’t links (4) are converted to toggle buttons, similar to how they’re handled in SuperSide Me (this ends up in a menu which flexibly uses both W3C recommended approaches to the parent menu item behavior); the mobile/desktop behavior is consistent across screen sizes (5); and I can check if a mobile menu plugin is running and refrain from doing mobile menu acrobatics if one is (6).

Wait, What About Superfish?

The key thing I had to do to make all this work was remove Superfish from the equation altogether. Since what I wanted to do, in essence, was to expand the mobile menu behavior to desktop, this made sense, and meant I was no longer fighting a script’s default behavior. In Genesis, this means not including drop-down-menu in the list of accessibility features to enable.

Because I’m not using Superfish, and I’ve already resolved the parent menu item issue for mobile, what I’ve done is just to use the mobile behavior at every screen size. Instead of creating submenu toggle buttons for mobile, and hiding them on desktop (and maybe replacing them with something else), I’m using the toggle buttons everywhere. A keyboard navigation user can now choose to open the submenu, or jump to the next parent menu item without having to go through all of the menu items. The hover behavior is visually the same, although I’ve added a distinct delay on closing submenus based on the W3C recommendation.

How to Try Out This New Responsive Navigation Script

If you’d like to try this out for yourself, please do! Just visit the Leaven responsive menu Github repository and clone or download it to your computer. It’s not a plugin on its own, as it’s meant to be integrated with your theme. Check the readme instructions for where to put the files and how to load them.

The script itself should not need to be edited, unless you find a bug, and both a regular and minified version are provided.

The CSS is completely rewritten from most Genesis child themes. It is mobile first, and separated into Sass files if you want them:

  • navigation.scss: general navigation styles (nav)
  • navigation-genesis.scss: Genesis specific navigation styles
  • navigation-buttons.scss: all toggle button styles
  • navigation-no-js.scss: fallback styles if JavaScript is not enabled
  • navigation-social.scss: social menu navigation styles (social icons, based on Jackie D’Elia’s tutorial using Twenty Seventeen’s social menu)
  • navigation-search.scss: styling for adding a search input to a navigation menu (based on this tutorial from Sridhar Katakam)

In my own theme, I follow this with very minimal styling for each registered menu location (changing a navigation bar color, or text case, etc.). All other navigation styles are removed.

The sprites are from Font Awesome 5; you can use these or another, as you prefer.

The PHP files are broken into multiple files due to how my theme is set up, but you can add the functions to your theme however you prefer.

Final Thoughts

Is this the best way to approach website navigation? I am not sure, honestly. I do feel like it’s a better approach than what we’re currently using, which is a better approach than what we had before. So we keep working and iterating and improving. If you’d like to try this out for yourself, I would love any feedback, comments, and/or pull requests.

Photo by Bundo Kim

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple