A mobile-first navigation pattern, with an optional expand-and-collapse menu on small screens.
Download Astro / View the demo
Compiled and production-ready code can be found in the dist directory. The src directory contains development code.
<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.
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>
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>
You can install Astro with your favorite package manager.
npm install cferdinandi/astrobower install https://github.com/cferdinandi/astro.gitcomponent install cferdinandi/astroIf 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.
Make sure these are installed first.
cd into your project directory.npm install to install required files.gulp manually compiles files.gulp watch automatically compiles files and applies changes using LiveReload.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.
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.
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.
You can also call Astro's navigation toggle event in your own scripts.
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 the current astro.init(). This is called automatically during the init function to remove any existing initializations.
astro.destroy();
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.
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.
The code is available under the MIT License.
FAQs
Mobile-first navigation patterns
The npm package astronav receives a total of 9 weekly downloads. As such, astronav popularity was classified as not popular.
We found that astronav demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.