Foundation CSS Magellan Navigation
Last Updated :
23 Jul, 2025
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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
</head>
<body>
<!-- This demo uses float grid but you
can use flex grid too -->
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3 class="">
Foundation CSS Magellan Navigation
</h3>
<ul class="menu" data-magellan>
<li><a href="#dsa"><button type="button" class="button">
Got to DSA Section</button></a></li>
<li><a href="#Algo"><button type="button" class="button">
Skip to Algo Section</button></a></li>
<li><a href="#Interview"><button type="button" class="button">
Got to Interview Section</button></a></li>
<li><a href="#cpp"><button type="button" class="button">
Got to CPP Section</button></a></li>
<li><a href="#Java"><button type="button" class="button">
Got to Java Section</button></a></li>
</ul>
<div class="sections">
<section id="dsa" data-magellan-target="dsa">
<h4>DSA section</h4>
<strong>This is the DSA section. </strong>
<p>
A data structure is a group of data elements
that provides the easiest way to store and
perform different actions on the data of the
computer. A data structure is a particular
way of organizing data in a computer so that
it can be used effectively. The idea is to
reduce the space and time complexities of
different tasks. The choice of a good data
structure makes it possible to perform a
variety of critical operations effectively.
An efficient data structure also uses
minimum memory space and execution time to
process the structure.
</p>
</section>
<section id="Algo" data-magellan-target="Algo">
<h4>Algo section</h4>
<strong>This is the Algo section.</strong>
<p>
Hi Geeks!! Welcome to GeeksForGeeks.
The word Algorithm means ” A set of rules to be
followed in calculations or other problem-solving
operations ” Or ” A procedure for solving a
mathematical problem in a finite number of steps
that frequently by recursive operations “.
Therefore Algorithm refers to a sequence of
finite steps to solve a particular problem.
It can be understood by taking the example of
cooking a new recipe. To cook a new recipe, one
reads the instructions and steps and executes
them one by one, in the given sequence. The
result thus obtained is the new dish cooked
perfectly. Every time you use your phone,
computer, laptop, or calculator you are using
Algorithms. Similarly, algorithms help to do
a task in programming to get the expected output.
The Algorithm designed are language-independent,
i.e. they are just plain instructions that can
be implemented in any language, and yet the
output will be the same, as expected.
</p>
</section>
<section id="Interview" data-magellan-target="Interview">
<h4>Interview section</h4>
<strong>This is the Interview Section</strong>
<p>
Course Description
An interview-centric course designed to prepare
you for the role of SDE for both product and
service based companies. A placement preparation
pack built with years of expertise. Prepare C++,
Java, DSA, CS Theory concepts and much more!
</p>
</section>
<section id="cpp" data-magellan-target="cpp">
<h4>CPP section</h4>
<strong>This is the CPP Section</strong>
<p>
C++ is a general-purpose programming language
that was developed as an enhancement of the C
language to include object-oriented paradigm.
It is an imperative and a compiled language.
C++ is a middle-level language rendering it
the advantage of programming low-level
(drivers, kernels) and even higher-level
applications (games, GUI, desktop apps etc.).
The basic syntax and code structure of both
C and C++ are the same.
</p>
</section>
<section id="Java" data-magellan-target="Java">
<h4>Java section</h4>
<strong>This is the JAVA Section</strong>
<p>
JAVA was developed by James Gosling at Sun
Microsystems Inc in the year 1995, later
acquired by Oracle Corporation. It is a simple
programming language. Java makes writing,
compiling, and debugging programming easy.
It helps to create reusable code and modular
programs. Java is a class-based, object-oriented
programming language and is designed to have
as few implementation dependencies as possible.
A general-purpose programming language made
for developers to write once run anywhere that
is compiled Java code can run on all platforms
that support Java. Java applications are compiled
to byte code that can run on any Java Virtual
Machine. The syntax of Java is similar to c/c++.
</p>
</section>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Example 2: The code below illustrates a Sticky Magellan Navigation Bar. We have used a Top Bar component as the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
</head>
<body>
<!-- This demo uses float grid but you can use flex grid too -->
<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">
<h4 style="color: green">
GeeksforGeeks</h4>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu float-right" data-magellan>
<li><a href="#dsa">
<button type="button" class="button">
Got to DSA Section</button></a></li>
<li><a href="#Algo">
<button type="button" class="button">
Skip to Algo Section</button></a></li>
<li><a href="#Java">
<button type="button" class="button">
Got to Java Section</button></a></li>
</ul>
</div>
</div>
</div>
<h3 class="margin-1">Foundation CSS Magellan Navigation</h3>
<div class="row demo-toggle-title">
<div class="columns">
<div class="sections">
<section id="dsa" data-magellan-target="dsa">
<h4>DSA section</h4>
<strong>This is the DSA section. </strong>
<p>
A data structure is a group of data elements
that provides the easiest way to store and perform
different actions on the data of the computer.
A data structure is a particular way of organizing
data in a computer so that it can be used effectively.
The idea is to reduce the space and time
complexities of different tasks.
The choice of a good data structure makes it
possible to perform a variety of critical
operations effectively. An efficient data
structure also uses minimum memory space and
execution time to process the structure.
</p>
</section>
<section id="Algo" data-magellan-target="Algo">
<h4>Algo section</h4>
<strong>This is the Algo section.</strong>
<p>
Hi Geeks!! Welcome to GeeksForGeeks.
The word Algorithm means ” A set of rules to
be followed in calculations or other
problem-solving operations ” Or ” A procedure
for solving a mathematical problem in a finite
number of steps that frequently by recursive
operations “.
Therefore Algorithm refers to a sequence of
finite steps to solve a particular problem.
It can be understood by taking the example of
cooking a new recipe. To cook a new recipe, one
reads the instructions and steps and executes
them one by one, in the given sequence. The
result thus obtained is the new dish cooked
perfectly. Every time you use your phone,
computer, laptop, or calculator you are using
Algorithms. Similarly, algorithms help to do
a task in programming to get the expected output.
The Algorithm designed are language-independent,
i.e. they are just plain instructions that can
be implemented in any language, and yet the
output will be the same, as expected.
</p>
</section>
<section id="Java" data-magellan-target="Java">
<h4>Java section</h4>
<strong>This is the JAVA Section</strong>
<p>JAVA was developed by James Gosling at Sun
Microsystems Inc in the year 1995, later acquired
by Oracle Corporation. It is a simple programming
language. Java makes writing, compiling, and
debugging programming easy. It helps to create
reusable code and modular programs. Java is a
class-based, object-oriented programming
language and is designed to have as few
implementation dependencies as possible. A
general-purpose programming language made for
developers to write once run anywhere that is
compiled Java code can run on all platforms that
support Java. Java applications are compiled
to byte code that can run on any Java Virtual
Machine. The syntax of Java is similar to c/c++.
</p>
</section>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Reference: https://get.foundation/sites/docs/magellan.html#sticky-navigation
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read