Foundation Laravel Package

title: Magellan description: Magellan allows you to create navigation that tracks the active section of a page your user is in. Pair it with our Sticky plugin to create a fixed navigation element. video: 'eT-WWX74SY0' js: js/foundation.magellan.js tags:

• navigation

Setup

You can use Magellan with any navigation element, like our Menu or your own custom component. Just add the attribute data-magellan to the container, and links to specific sections of your page. Each section needs a unique ID.

<!-- Add a Menu -->
<ul class="menu expanded" data-magellan>
  <li><a href="#first">First Arrival</a></li>
  <li><a href="#second">Second Arrival</a></li>
  <li><a href="#third">Third Arrival</a></li>
</ul>

<!-- Add content where magellan will be linked -->
<div class="sections">
  <section id="first" data-magellan-target="first">First Section</section>
  <section id="second" data-magellan-target="second">Second Section</section>
  <section id="third" data-magellan-target="third">Third Section</section>
</div>

Sticky Navigation

You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.

<!-- Add a Sticky Menu -->
<div data-sticky-container>
  <div class="top-bar" data-sticky data-margin-top="0" id="example-menu">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">Site Title</li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu" data-magellan>
        <li><a href="#first">One</a></li>
        <li><a href="#second">Two</a></li>
        <li><a href="#third">Three</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- Add content where magellan will be linked -->
<div class="sections">
  <section id="first" data-magellan-target="first">First Section</section>
  <section id="second" data-magellan-target="second">Second Section</section>
  <section id="third" data-magellan-target="third">Third Section</section>
</div>

This below example is a simplified version of the table of contents on the right side of this page.

<div class="cell large-3">
  <nav class="sticky-container" data-sticky-container>
    <div class="sticky" data-sticky data-anchor="exampleId" data-sticky-on="large">
      <ul class="vertical menu" data-magellan>
        <li><a href="#first">First Arrival</a></li>
        <li><a href="#second">Second Arrival</a></li>
        <li><a href="#third">Third Arrival</a></li>
      </ul>
    </div>
  </nav>
</div>

Browser History

When the data-deep-link option is set to true, the active section of Magellan is recorded by adding a hash with the active Magellan section ID to the browser URL. By default, Magellan replaces the browser history (using history.replaceState()).

Modify this behavior by using the attribute data-update-history="true" to append to the browser history (using history.pushState()). In the latter case, the browser's back button will track each section Magellan has gone through (in most case, this is not recommended).