--- title: Magellan layout: component.html ---

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}} *** ### Adding New Content After Page Load If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following: {{#markdown}} ```javascript $(document).foundation(); ``` {{/markdown}} Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. {{#markdown}} ```javascript $(document).foundation('magellan-expedition', 'reflow'); ``` {{/markdown}} *** ### 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.