Skip to content

WordPress Component Library
10up Engineering

Responsive Navigation

The responsive navigation component is a normal horizontal navigation on large screen, and collapses down to an off-canvas model on small viewports. The default HTML should work within the confines of WordPress, but some modifications may have to be implemented for your specific use case. No jQuery is required.

HTML

			

<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><!-- .site-navigation -->

			
			<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>

	<ul id="primary-nav" class="primary-menu">
		<li id="menu-item-1912" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1912">
			<a href="#">About Us</a>
		</li>
		<li id="menu-item-1913" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1913">
			<a href="#">Our Work</a>
			<ul class="sub-menu">
				<li id="menu-item-1914" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1914">
					<a href="#">JavaScript</a>
				</li>
				<li id="menu-item-4494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4494">
					<a href="#">WordPress</a>
					<ul class="sub-menu">
						<li id="menu-item-4495" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-4495">
							<a href="#">Plugins</a>
						</li>
						<li id="menu-item-4496" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-4496">
							<a href="#">Themes</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li id="menu-item-1915" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1915">
			<a href="#">Giving Back</a>
		</li>
		<li id="menu-item-1916" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1916">
			<a href="#">Blog</a>
		</li>
		<li id="menu-item-1916" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1916">
			<a href="#">Contact</a>
		</li>
	</ul>

</nav><!-- .site-navigation -->

			

PostCSS Download PostCSS

@custom-media --width-small (width < 30em);
@custom-media --width-medium (width >= 48em);
@custom-media --width-large (width >= 60em);
@custom-media --width-xlarge (width >= 80em);

.TenUp__navigation__menu {
	list-style: none;
	margin: 0;
	padding: 0;

	&[aria-hidden="true"] {
		display: none;
	}

	&:target,
	&[aria-hidden="false"] {
		display: block;
	}
}

.TenUp__navigation__menu--main {

	& > .TenUp__navigation__menu-item {
		display: block;

		@media (--width-medium) {
			display: inline-block;
		}
	}
}

.TenUp__navigation__menu--submenu {

	@media (--width-medium) {
		left: 0;
		position: absolute;
		top: 100%;
	}

	& > .TenUp__navigation__menu-item {
		display: block;
	}
}

.TenUp__navigation__menu--hover {

	.TenUp__navigation__menu-item {

		&:hover {

			@media (--width-medium) {

				& > .TenUp__navigation__menu--submenu,
				& > .TenUp__navigation__menu--submenu[aria-hidden="true"] {
					display: block;
				}
			}
		}
	}
}

.TenUp__navigation__menu-toggle {

	&[aria-hidden="true"] {
		display: none;
	}

	&[aria-hidden="false"] {
		display: block;
	}
}

.TenUp__navigation__menu-item {

	@media (--width-medium) {
		position: relative;
	}
}

.no-js {

	& [data-responsive-nav-control] {

		@media (--width-medium) {
			display: none;
		}
	}

	& .primary-menu {
		display: none;
		list-style: none;
		margin: 0;
		padding-left: 0;

		@media (--width-medium) {
			display: block;
		}

		&:target {
			display: block;
		}

		& ul {
			list-style: none;
			margin: 0;
			padding-left: 0;
		}

		& li {
			position: relative;

			&:hover,
			&:focus-within {

				& > ul {
					display: block;
				}
			}

			& > a {

				&:focus {

					& > ul {
						display: block;
					}
				}
			}

			& > ul {
				display: none;

				@media (--width-medium) {
					left: 0;
					position: absolute;
					top: 100%;
				}
			}
		}

		& > li {
			display: block;

			@media (--width-medium) {
				display: inline-block;
			}
		}
	}
}

JavaScript Plugin

NPM

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

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

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

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

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' );
	}
} );

JavaScript API

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

Settings

Callbacks

Browser Compatibility

Feature Chrome Firefox Internet Explorer Edge Safari
Basic Support Latest Latest 11 Latest Latest

Resources