---
title: Magellan
---
***
{{> 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.