Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Kitchen Sink Responsive Menu Classes in Foundation CSS.

Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Responsive Menu is used to add the responsive menu with horizontal and vertical alignment of items in the website and mobile view respectively.

Foundation CSS Kitchen Sink Responsive Menu classes:

• [size]-vertical: This class is used to specify the vertical alignments of items on the given size screen. The screen sizes can be small, medium, and large.
• [size]-horizontal: This class is used to specify the vertical alignments of items on the given size screen. The screen sizes can be small, medium, and large.

Syntax:

<ul class="[size]-vertical 
    [size]-horizontal menu">
      <li>
        ......
    </li>
</ul>

Example 1: Below is the example that illustrates the use of the Kitchen Sink Responsive Menu using medium-vertical, large-horizontal, and menu classes.

Output:

Foundation CSS Kitchen Sink Responsive Menu

Example 2: Below is the example that illustrates the use of the Kitchen Sink Responsive Menu using large-vertical, medium-horizontal, and menu classes.

Output:

Foundation CSS Kitchen Sink Responsive Menu

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