Foundation CSS Menu Item Alignment

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Menus are the main tools for visitors to navigate throughout a website. In Menu Item Alignment Navigation section, By default, each item of navigation menu are left aligned. To make the navigation menu right align, we will use align-right class.

Foundation CSS Menu Item Alignment Class:

align-left: This class is used to align the navigation menu to left side. This class is used with menu class inside <ul> element. It can be used only when the navigation menu are placed in right-to-left environment.
align-right: This class is used to align the navigation menu to right side. This class is used with menu class inside <ul> element.
align-center: This class is used to align the navigation menu to center. This class is used with menu class inside <ul> element.
expanded: This class is used to place the menu items using even amount of space. This class is used with menu class inside <ul> element.

Syntax:

<ul class="menu align-right">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  . . .
</ul>

Example:

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Foundation CSS Menu Item Alignment</title> 

    <!-- Compressed CSS -->

    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

        crossorigin="anonymous"> 

    <!-- Compressed JavaScript -->

    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"

        crossorigin="anonymous"></script> 

</head> 

<body> 

    <center> 

        <h1 style="color: green;"> 

            GeeksforGeeks 

        </h1> 

        <h3>Foundation CSS Menu Item Alignment</h3> 

    </center> 

    <ul class="menu align-center"> 

        <li><a href="#">GeeksforGeeks</a></li> 

        <li><a href="#">Web Technology</a></li> 

        <li><a href="#">Data Structure</a></li> 

        <li><a href="#">Programming</a></li> 

        <li><a href="#">Algorithm</a></li> 

    </ul> 

</body> 

</html>

Output:

Foundation CSS Menu Item Alignment

Reference: https://get.foundation/sites/docs/menu.html#item-alignment

Article Tags :

CSS

Web Technologies

Foundation

Foundation-Navigation