Magellan
Magellan is a style agnostic plugin that gives your site sticky navigation. This fixed-position navigation helps users keep track of where they are on a page without scrolling.
Arrival
You can create the fixed navigation structure for Magellan using minimal markup.
<div data-magellan-expedition="fixed">
<dl class="sub-nav">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
</dl>
</div>Destination
You can create the destination structure for Magellan using minimal markup.
<a name="arrival"></a>
<h3 data-magellan-destination="arrival">Arrival</h3>
<a name="destination"></a>
<h3 data-magellan-destination="destination">Destination</h3>Working With Sonos Bar
Working with the sonos bar requires you to add a class of .sonos-magellan to your Magellan code. This will push down the bar to sit right beneath the Sonos Bar.
<div class="sonos-magellan" data-magellan-expedition="fixed">
...
</div>Configure with JavaScript
Using data-attributes is the preferred method of making changes to our JavaScript.
<h3 data-magellan-destination="js">Using Our Javascript</h3>
<div data-magellan-expedition="fixed">
<ul class="sub-nav">
<li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
<li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
</ul>
</div>Color Palette
Magellan can be configured to the different colors offered by the brand color palette.
<div data-magellan-expedition="fixed">
<dl class="sub-nav alt">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav play1">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav play3">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav play5">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav playbar">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav sub">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav connect-amp">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav connect">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav light">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav dark">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div><div data-magellan-expedition="fixed">
<dl class="sub-nav amber">
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
<dd data-magellan-arrival="js"><a href="#js">Arrival</a></dd>
</dl>
</div>