Astronav NPM | npm.io

Astro

A mobile-first navigation pattern, with an optional expand-and-collapse menu on small screens.

Want to learn how to write your own vanilla JS plugins? Check out "The Vanilla JS Guidebook" and level-up as a web developer. 🚀

Getting Started

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

1. Include Astro on your site.

<link rel="stylesheet" href="dist/css/astro.css">
<script src="dist/js/astro.js"></script>

The optional expand-and-collapse menu on smaller screens requires astro.js. Basic versions can omit this file.

2. Add the markup to your HTML.

Make sure that the [data-nav-toggle] value matches the ID of the .nav-menu section. To activate expand-and-collapse functionality, add the .nav-collapse class to the .nav-wrap element.

<nav class="nav-wrap nav-collapse">
	<a class="logo" href="#">My Brand</a>
	<a class="nav-toggle" data-nav-toggle="#nav-menu" href="#">Menu</a>
	<div class="nav-menu" id="nav-menu">
		<ul class="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</div>
</nav>

3. Initialize Astro.

If you're using the expand-and-collapse menu for smaller screens, initialize Astro in the footer of your page, after the content. And that's it, you're done. Nice work!

<script>
	astro.init();
</script>

Installing with Package Managers

You can install Astro with your favorite package manager.

NPM: npm install cferdinandi/astro
Bower: bower install https://github.com/cferdinandi/astro.git
Component: component install cferdinandi/astro

Working with the Source Files

If you would prefer, you can work with the development code in the src directory using the included Gulp build system. This compiles, lints, and minifies code.

Dependencies

Make sure these are installed first.

Node.js
Gulp sudo npm install -g gulp

Quick Start

In bash/terminal/command line, cd into your project directory.
Run npm install to install required files.
When it's done installing, run one of the task runners to get going:
- gulp manually compiles files.
- gulp watch automatically compiles files and applies changes using LiveReload.

Active Link Styling

There's a placeholder in the CSS to add styling to the current page in the navigation menu.

/*  Placeholder for active link styling */
/*  .nav > li.active > a { */
/*      Add your styles here */
/*  } */

Note: If you're using WordPress, check out this great tutorial by Todd Motto on how to add the .active class using a simple PHP function.

Options and Settings

Astro includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.

Global Settings

You can pass options and callbacks into Astro through the init() function:

astro.init({
	selector: '[data-nav-toggle]', // Navigation toggle selector
	toggleActiveClass: 'active', // Class added to active dropdown toggles on small screens
	navActiveClass: 'active', // Class added to active dropdown content areas on small screens
	initClass: 'js-astro', // Class added to `<html>` element when initiated
	callback: function ( toggle, navID ) {} // Function that's run after a dropdown is toggled
});

Note: If you change the selector, you still need to include the [data-nav-toggle] attribute in order to pass in the selector for the navigation menu.

Use Astro events in your own scripts

You can also call Astro's navigation toggle event in your own scripts.

toggleNav()

Expand or collapse a navigation menu.

astro.toggleNav(
	toggle, // Node that toggles the dropdown action. ex. document.querySelector('#toggle')
	navID, // ID of the navigation content wrapper. ex. '#nav-menu'
	options, // Classes and callbacks. Same options as those passed into the init() function.
	event // Optional, if a DOM event was triggered.
);

Example

astro.toggleNav( null, '#nav-menu' );

destroy()

Destroy the current astro.init(). This is called automatically during the init function to remove any existing initializations.

astro.destroy();

Browser Compatibility

Astro works in all modern browsers, and IE 10 and above. You can extend browser support back to IE 9 with the classList.js polyfill.

Astro is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, the Basic navigation patterns will be displayed instead of the Plus versions.

How to Contribute

In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.

License

The code is available under the MIT License.

@everything-registry/sub-chunk-1174 @zalastax/nolb-ast

10.2.0

7 years ago