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>