Nav Component

This is a reworking of 10up's Navigation Component for WordPress development. The notable change is using Dart Sass to be the primary CSS preprocessor. The benefit of this is the ability to use the latest language features which enables the CSS to be highly customizable. The departures from the original component are noted in Specific Changes.

npm install @rocketsquirrelio/nav

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>

Sass Component

The most basic usage is to simply include the component into the stylesheet.

@use '@rocketsquirrelio/nav';

Dropdown Mixin

The dropdown mixin allows full customization at the point of implementation to customize the specific pseudo-element (:after).

@include nav.dropdown-icon {
    content: '+';
    display: inline-block;
    font-weight: 700;
    margin-left: .25em;
}

Advanced Usage

This version takes advantage of the latest language features in Dart Sass. Override the default media query and dropdown selector for the Dropdown Mixin.

// => style.scss
@use '@rocketsquirrelio/nav' with (
	$menu-class: 'primary-menu',
    $media-query: '(min-width: 48em)',
    $dropdown-selector: '.menu-item-has-children > a:after',
);

| Variable | Default Value | Description | |:---------|:--------------|:------------| |$media-query|min-width: 48em|The breakpoint when the menu should switch to the mobile version. This should match the media query passed in the JavaScript component.| |$dropdown-selector|.menu-item-has-children > a:after|The full selector to target placing an icon.|

JavaScript Component

Incorporate the component directly into a JavaScript build process.

Example Usage

import Nav from '@rocketsquirrelio/nav';

new Nav( '#primary-nav', {
    action: 'click',
    breakpoint: '(min-width: 48em)',
	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' );
	}
} );

Specific Changes

Any changes from the original component have been noted below.

CSS Changes

There was one opinionated, non-structural line of CSS removed. The margin-right rule applied to .menu-item was removed to create a more raw template for development. This rule was likely implemented for accessibility, but it is easier to handle this at the point of implementation. (source)

Implementation Changes

This version removes mutation of the global window object and does not ship with a dist/ folder. It cannot be used as a standalone implementation.