Foundation CSS Magellan Navigation

Foundation CSS is an open-source front-end framework that is used to create stunning responsive websites, emails, or apps quickly and easily. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is built on the Bootstrap framework. It is more unique, flexible, and complex. Working with module bundlers is also simple due to its command-line interface. Email framework creates HTML emails that are accessible on all devices and mobile-friendly. Using Foundation for Apps, you can make fully responsive web applications.

Foundation CSS Magellan is mainly used to build local navigation or navigation which contains the utility of jumping to specific parts of a webpage. When the links in the Magellan are clicked, the viewport sprints to the given target without scrolling down the webpage. 

Foundation CSS Magellan Navigation is of two types of navigation that are provided by Magellan, one is the basic one and the other is the sticky one. Now, you can sprint to example 1 below and see how the basic Magellan is just not the perfect way to implement the Magellan. On the other hand, look at example 2 and you can see that the Sticky Navigation is more of a practical example where no matter where you are on the Webpage you can Navigate quickly to any other part of the Webpage. You can use any type of the Navigation Component to create a Magellan, you don't need to take any specific classes in to make a Magellan. There are some specific attributes that are needed to create a Magellan.

Foundation CSS Magellan Navigation Attributes:

Basic Magellan:

• [data-magellan]: This class is used to create the navigation of links to the respective sections.
• [data-magellan-target=id]: This class is used to indicate the sections where the viewport will jump when we click the respective links. It takes the value of the div that 

Syntax:

<ul class="menu" data-magellan>
 <li><a href="#first">..</a></li>
 <li><a href="#second">..</a></li>
 <li><a href="#third">..</a></li>
</ul>

<div class="sections">
 <section id="first" 
 data-magellan-target="first">
 ...
 </section>
 <section id="second" 
 data-magellan-target="second">
 ...
 </section>
 <section id="third" 
 data-magellan-target="third">
 ...
 </section>
</div>

Sticky Magellan Navigation: We need to add that Magellan is inside a Sticky container.

• [data-sticky-container]: This attribute is used for the container, which is designed to be sticky. There is no value in this attribute.
• [data-sticky]: This attribute is used with the element which is meant to be a sticky element. This attribute doesn't take any value.

Syntax:

<!-- Add a Sticky Menu -->
<div data-sticky-container>
 <div class=".." data-sticky>
 ...
 </div>
</div>

<div class="sections">
 <section id="first" 
 data-magellan-target="first">
 ...
 </section>
 <section id="second" 
 data-magellan-target="second">
 ...
 </section>
 <section id="third" 
 data-magellan-target="third">
 ...
 </section>
</div>

Example 1: This code below demonstrates how to use a simple menu with buttons to make a basic Magellan Navigation.

Output:

👁 Image

Example 2: The code below illustrates a Sticky Magellan Navigation Bar. We have used a Top Bar component as the navigation bar.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/magellan.html#sticky-navigation