Astro

Mobile-first navigation patterns.

Download Astro 2

GitHub Project       Getting Started

Getting Started

Astro is a collection of five mobile-first navigation patterns. Each pattern includes an optional expand-and-collapse menu on small screens.

  1. Basic. A centered navigation and logo.
  2. Basic Left. A left-aligned navigation and logo.
  3. Navbar. An inline navigation and logo.
  4. Navbar Left. An inline navigation and logo with left-aligned navigation.
  5. Stacked. Stacked navigation on big screens. Inline navigation on smaller screens.

Using Multiple Patterns

For simpicity, each navigation pattern uses the same naming conventions. If you will be using more than one pattern on a project, you'll need to change the class names to avoid conflicts.

For example, if you were combining Astro Basic and Astro Stacked, you might rename .nav to .nav-basic and .nav-stacked, respectively.

Navigation Toggle

If you're using the optional expand-and-collapse menu on small screens, you can use either an <a> or a <button> element to toggle to the menu content.

Include a data-target attribute that matches the ID of the menu.

<a class="nav-toggle" data-target="#nav-menu" href="#">Menu</a>
<div class="nav-collapse" id="nav-menu">
    ...
</div>

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.

Progressively Enhanced

If you're using the optional expand-and-collapse menu, small screen users are shown the full navigation menu by default.

Astro includes a script that checks for JavaScript support by adding a .js class to the <body> on page load. This activates expand-and-collapse menu, hiding the menu content and showing the toggle menu button.

That way, people without JavaScript support still have access to your site navigation.

Browser Support

Astro works in all modern browsers and IE 8 and above.

If you're using the optional expand-and-collapse menu for smaller screens, Astro also requires jQuery.