<%= @page_title %>

Magellan is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.

---

Build With Predefined HTML Structure

When we set out to build Magellan, we wanted it to be really lightweight and stay out of your way. With that in mind, we kept custom styles out of the game. Magellan is style agnostic, meaning you can attach it to anything. There are a few built-in lists in Foundation that will work, including the sub-nav. If you look at the top of this page you'll see our sub-nav. As you scroll, you'll see Magellan in action!

<%= code_example ' ', :html %>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected magellan from a custom package. These should be linked up following our default HTML page structure.

---

Using Our JavaScript

You'll need to include foundation.magellan.js to get everything to work properly. You'll also need to make sure to include zepto.js and foundation.js above the plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.magellan.js

Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:

<%= code_example '

Using Our Javascript

', :html %>

Optional JavaScript Configuration

Magellan options can only be passed in during initialization at this time.

<%= code_example " { // specify the class used for active sections activeClass: 'active', // how many pixels until the magellan bar sticks, 0 = auto threshold: 0 }", :js %>