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