--- title: Magellan ---

Magellan is a style-agnostic plugin that lets you give your site sticky navigation. This fixed-position navigation helps users keep track of where they are on a page without scrolling.

*** {{> examples_magellan_basic}} ***

Arrival

You can create the fixed navigation structure for Magellan using minimal markup.

HTML

{{> examples_magellan_basic_rendered}} ***

Destination

You can create the destination structure for Magellan using minimal markup.

HTML

{{#markdown}} ```html {{> examples_magellan_destination}} ``` {{/markdown}} ***

Configure with JS

It's easy to configure Magellan using our provided Javascript. You can use with data-attributes or plain old Javascript. Make sure `jquery.js`, `foundation.js`, and `foundation.magellan.js` have been included on your page before continuing. For example, add the following before the closing `` tag:

HTML

{{> examples_magellan_javascript}}

Basic

Using data-attributes is the preferred method of making changes to our Javascript.

HTML

{{> examples_magellan_library}} ***

Advanced

You can adjust lots of settings. For example: #### JS {{> examples_magellan_options}} ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

{{#markdown}} ```scss @import "foundation/components/magellan"; ``` {{/markdown}} *** ## Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.