Open In App

Foundation CSS Kitchen Sink Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the free, open-source front-end CSS framework used to build beautiful, responsive websites, applications, and emails that work on any type of device. It is written using HTML, CSS, and Javascript. It is used by many companies like Amazon, Facebook, Disney, etc. It uses Saas compiler for faster development and uses packages like Grunt and Libsass for fast coding and controlling.  

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. The kitchen sink menu is used to create the menu with some list items.

Foundation CSS Kitchen Sink class:

  • menu: It is used to create the menu with some items.

Syntax:

<ul class="menu">
    ....  
</ul>

Example 1: The following code demonstrates the kitchen sink class by using the required pre-compiled file of Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink</title>
  
    <link rel="stylesheet" href=
        crossorigin="anonymous">
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <strong>
        Foundation CSS Kitchen Sink Menu
    </strong>
  
    <ul class="menu">
        <li><a href="#"><span>Item1</span></a></li>
        <li><a href="#"><span>Item2</span></a></li>
        <li><a href="#"><span>Item3</span></a></li>
        <li><a href="#"><span>Item4</span></a></li>
    </ul>
</body>
  
</html>


Output:

Example 2: The following code demonstrates the kitchen sink class along with the font-awesome icons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink</title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Kitchen Sink Menu</h3>
  
    <ul class="menu">
        <a class="active" href="#">
            <i class="fa fa-fw fa-home"></i>
            Home
        </a>
        <a href="#">
            <i class="fa fa-fw fa-search"></i
            Search
        </a>
        <a href="#">
            <i class="fa fa-fw fa-envelope"></i
            Contact
        </a>
        <a href="#">
            <i class="fa fa-fw fa-user"></i
            Login
        </a>
    </ul>
</body>
  
</html>


Output:

Reference link: https://get.foundation/sites/docs/kitchen-sink.html#menu



Last Updated : 23 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads