10up/component-navigation

10up Navigation component

DEPRECATED. Please go to https://github.com/10up/component-library

An accessible and responsive navigation component.

Installation

NPM

npm install --save @10up/component-navigation

Standalone

Clone this repo and import navigation.js and navigation.css from the dist/ directory.

API

This component accepts two arguments, the selector for the navigation container and an object containing configuration settings and optional callbacks.

Settings

• action: The action to use to open menu items (default) hover
• breakpoint: Viewport breakpoint to switch to small screen menu (default) (min-width: 48em)

Callbacks

• onCreate: Called after the component is initialized on page load
• onOpen: Called when a menu item is opened
• onClose: Called when a menu item is closed
• onSubmenuOpen: Called when a submenu item is opened
• onSubmenuClose: Called when a submenu item is closed

Usage

Markup

This is the markup template expected by the component.

<nav class="site-navigation" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

   <a href="#primary-nav" aria-controls="primary-nav">
   	<span class="screen-reader-text">Primary Menu</span>
   	<span aria-hidden="true">☰</span>
   </a>

   <?php
   	wp_nav_menu( array(
   		'theme_location' => 'primary',
   		'menu_class'     => 'primary-menu',
   		'menu_id'        => 'primary-nav',
   		) );
   ?>

</nav>

CSS

The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.

PostCSS Imports

@import '@10up/component-navigation';

Standalone

Include the navigation.css file from the dist/ directory.

JavaScript

Create a new instance by supplying the selector to use for the navigation and an object containing any necessary configuration settings and callback functions.

NPM

import Navigation from '@10up/component-navigation';

new Navigation( '.navigation', {
	action: 'click',
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onOpen: function() {
		console.log( 'onOpen callback' );
	},
	onClose: function() {
		console.log( 'onClose callback' );
	},
	onSubmenuOpen: function() {
		console.log( 'onSubmenuOpen callback' );
	},
	onSubmenuClose: function() {
		console.log( 'onSubmenuClose callback' );
	}
} );

Standalone

Include the navigation.js file from the dist/ directory and access the component from the gobal TenUp object.

let myNavigation = new TenUp.navigation( '.navigation', {
	action: 'click',
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onOpen: function() {
		console.log( 'onOpen callback' );
	},
	onClose: function() {
		console.log( 'onClose callback' );
	},
	onSubmenuOpen: function() {
		console.log( 'onSubmenuOpen callback' );
	},
	onSubmenuClose: function() {
		console.log( 'onSubmenuClose callback' );
	}
} );

Demo

Example implementations can be found in the demo directory.

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?

component-navigation's Issues

Using separate mobile menu in WordPress?

Not really an issue, but a question I have not been able to answer after much searching. Is it possible to use a separate mobile menu with the navigation component in WordPress that triggers at a specific breakpoint? Any guidance would be greatly appreciated.

Toggle status class on .menu-item-has-children > a

Is your feature request related to a problem? Please describe.
Would be useful to have is-opened (or similar) class toggled when opening/closing sub nav.

<a href="#!ourwork" aria-controls="tenUp-submenu-0" aria-haspopup="true">Our Work</a>

This would enable styling for example for SVG down arrow. Or any other style changes based on state of that link.

readme updates

Is your feature request related to a problem? Please describe.
It's not obvious the level of support provided for this repo, so let's add some clarification.

Describe the solution you'd like

• add support level section and badge
• add license file and badge

Describe alternatives you've considered
none.

Update component to use eslint v2

https://www.npmjs.com/package/@10up/eslint-config

Breadcrumbs

Is your feature request related to a problem? Please describe.
A breadcrumbs sample is shown in the demo, but where is it inside your repo?

Update CSS/JS to use classes outputted by PHP

Instead of adding custom classes via JavaScript for styling, we should be styling based on the markup outputted by the server.

`index.html` demo has wrong resource links

<link href="/dist/navigation.css" rel="stylesheet">

and

<script src="/dist/navigation.js"></script>

Should be:

<link href="dist/navigation.css" rel="stylesheet">

<script src="dist/navigation.js"></script>

Demo code missing site-menu-toggle class

Describe the bug
The example code for both HTML and Wordpress needs a site-menu-toggle class added to the main toggle element.

To Reproduce
Steps to reproduce the behavior:

1. Create a navigation output based on the markup provided.
2. Load the navigation in a browser window
3. Notice that on desktop, the navigation toggle still appears and its visibility isn't controlled by the script.

Expected behavior
When resizing from mobile to desktop, the navigation toggle should disappear, since it isn't required when the navigation becomes fully displayed.

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome
• Version: 84.0.4147.105

Additional context
By adding the site-menu-toggle class to the main toggle "a" element, this issue should be resolved.

aria-expanded not updated when ESC is pressed

Describe the bug
When the ESC key is used to close the submenus, the aria-expanded attribute stays set to "true" instead of changing to "false". This currently works as expected when using the Enter key to close the submenus.

To Reproduce
Steps to reproduce the behavior:

1. Use the keyboard to navigate through the navigation component
2. Click on parent menu item to display the submenu
3. Press the "ESC" key to close the submenu
4. The aria-expanded attribute of the parent menu item stays set to "true" instead of changing to "false"

Expected behavior
Ensure that the aria-expanded attribute value is changed to "false" when the ESC key closes the submenus.

Option for Top Menu Item with children to be a link as well

This component is great when we have a placeholder title for the top menu item. However, it is frustrating when we need to be able to link to the top menu item as well. I.e. "About" list item with children items of "Our Work", "Press", "FAQ" where "About" is a page. If we want to visit the About page we'd have to make it as a duplicate child item.

Since we already have an svg icon, it would be great for a setting on this component to allow you to have the top menu items be linkable and only the svg icon trigger the menu events or to keep the menu as its currently built where clicking the top menu item triggers the menu events.

Convert Functional Test from Travis to GitHub Actions

Use of `aria-haspopup`

Describe the bug
Curious if the aria-haspopup attribute is the correct use of the attribute in the component. According to https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup, it should:

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

A popup element usually appears as a block of content that is on top of other content. Authors MUST ensure that the role of the element that serves as the container for the popup content is menu, listbox, tree, grid, or dialog, and that the value of aria-haspopup matches the role of the popup container.

In https://inclusive-components.design/menus-menu-buttons/, it is specifically omitted in a navigational menu but is entirely appropriate (and required) in an application menu (using the menu role(s)).

On a related note, use of aria-expanded should be included.

To Reproduce
Steps to reproduce the behavior:

1. Clone repo
2. Open demo page locally
3. Open inspector or screen reader and note that links with submenus have aria-haspopup.

Expected behavior
Links with submenus shouldn't have aria-haspopup

Additional context
There seems to be conflicting information about this very issue, which probably has to do with the proper use of menu and its related roles.

Let's not use TenUp in the class names

Unless there's a need for this: .TenUp__navigation__menu let's avoid it, it's just overly long and the demos already use .site-navigation, I think

Update PR Template to include workflow and testing

Uncaught TypeError when clicking Esc key

Describe the bug
When clicking Esc I get Uncaught TypeError: Cannot read property 'previousElementSibling' of undefined at t.value.

To Reproduce
Steps to reproduce the behavior:

1. Go to demo
2. Tab into the nav but don't open the sub nav.
3. Click Esc.
4. Check Uncaught TypeError error on console.

Expected behavior
Pressing Esc would not trigger error.

Change entry point from src/navigation.js to dist/navigation.js

Is your feature request related to a problem? Please describe.
The entry point of the component (main value in package.json) points to ES6 code (https://github.com/10up/component-navigation/blob/master/package.json#L6) resulting in including the node_modules/@10up when transpiling code like we did in the theme scaffold: https://github.com/10up/theme-scaffold/blob/master/config/webpack.common.js#L68

Describe the solution you'd like
The entry point to be dist/navigation.js instead of src/navigation.js

Add issue and PR templates

Pass the submenu back to the call

Is your feature request related to a problem? Please describe.
Yes. There is a sort of problem.

When someone clicks a link that opens a submenu, the .submenu element toggles open with aria-hidden="false"
However the anchor item actually clicked (above the submenu element) gets no toggled-on class of any sort. It is not easy to style it for when it is open/closed.

I tried using the callbacks:

onSubmenuOpen: () => { //no way of getting to the current submenu opened },
onSubmenuClose: () => {},

However the callbacks are not being passed any parameters. So it is difficult to get the currently opened submenu and do things with it, or with adjacent siblings, like the clicked anchor.

Describe the solution you'd like
Please pass parameters for the callbacks like so:
Line 241 in navigation.js:
this.settings.onSubmenuOpen.call(this, $submenu);

Then I can use it like so:
onSubmenuOpen: (subMenu ) => { subMenu.previousElementSibling.classList.add('something') },

Ability to change `sub-menu`

Is your feature request related to a problem? Please describe.
I noticed there is hard coded sub-menu class used in the nav component. Could this be part of settings so it could be changed to something else.

This would enable changing sub-menu class to something else that fits better for chosen naming convention.

Describe the solution you'd like
sub-menu can be default but this could be overwritten via settings.