Foundation Lists

Foundation provides multiple list styles for creating navigation menus, content lists, and more. This chapter will introduce various uses of Foundation lists.

Use the .menu class to create a basic menu:

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Use the .vertical class to create a vertical menu:

<ul class="vertical menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Center Aligned

<ul class="menu align-center">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
</ul>

Right Aligned

<ul class="menu align-right">
    <li><a href="#">Login</a></li>
    <li><a href="#">Register</a></li>
</ul>

Expanded

<ul class="menu expanded">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Active State

Use .is-active to mark the current item:

<ul class="menu">
    <li class="is-active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Create multi-level nested menus:

<ul class="vertical menu">
    <li>
        <a href="#">Products</a>
        <ul class="nested vertical menu">
            <li><a href="#">Product A</a></li>
            <li><a href="#">Product B</a></li>
            <li>
                <a href="#">Product C</a>
                <ul class="nested vertical menu">
                    <li><a href="#">C-1</a></li>
                    <li><a href="#">C-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
</ul>

Menus with Icons

Combine with icons:

<ul class="vertical menu">
    <li><a href="#"><i class="fi-home"></i> Home</a></li>
    <li><a href="#"><i class="fi-torso"></i> Profile</a></li>
    <li><a href="#"><i class="fi-widget"></i> Settings</a></li>
    <li><a href="#"><i class="fi-mail"></i> Messages</a></li>
    <li><a href="#"><i class="fi-power"></i> Logout</a></li>
</ul>

<ul class="menu icons icon-top">
    <li><a href="#"><i class="fi-home"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fi-torso"></i><span>User</span></a></li>
    <li><a href="#"><i class="fi-widget"></i><span>Settings</span></a></li>
</ul>

Use the .simple class to create a clean menu:

<ul class="menu simple">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

Use .menu-text to add non-link text:

<ul class="menu">
    <li class="menu-text">Website Name</li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
</ul>

Change direction based on screen size:

<ul class="vertical medium-horizontal menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Multi-level drilldown menu:

<ul class="vertical menu" data-drilldown>
    <li>
        <a href="#">Products</a>
        <ul class="vertical menu">
            <li>
                <a href="#">Electronics</a>
                <ul class="vertical menu">
                    <li><a href="#">Phones</a></li>
                    <li><a href="#">Computers</a></li>
                </ul>
            </li>
            <li><a href="#">Home Goods</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="vertical menu">
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Technical Support</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
</ul>

Definition Lists

Basic Definition List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, used to create web page structure.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used to style web pages.</dd>

    <dt>JavaScript</dt>
    <dd>Scripting language used to implement web page interactions.</dd>
</dl>

Horizontal Definition List

<style>
    .horizontal-dl {
        display: flex;
        flex-wrap: wrap;
    }
    .horizontal-dl dt {
        flex: 0 0 30%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .horizontal-dl dd {
        flex: 0 0 70%;
        margin-bottom: 10px;
        margin-left: 0;
    }
</style>

<dl class="horizontal-dl">
    <dt>Product Name</dt>
    <dd>Foundation Framework</dd>
    <dt>Version</dt>
    <dd>6.7.5</dd>
    <dt>Developer</dt>
    <dd>ZURB</dd>
</dl>

Unordered List Styles

Bulletless List

<ul class="no-bullet">
    <li>List item without bullets</li>
    <li>List item without bullets</li>
    <li>List item without bullets</li>
</ul>

Custom Bullets

<style>
    ul.custom-bullet li::before {
        content: "→ ";
        color: #1779ba;
    }
    ul.custom-bullet {
        list-style: none;
        padding-left: 0;
    }
</style>

<ul class="custom-bullet">
    <li>Custom bullet list</li>
    <li>Using arrows as bullets</li>
    <li>More visually appealing</li>
</ul>

Lists with Cards

<ul class="no-bullet">
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>List Item Title 1</h5>
            <p>List item description content...</p>
        </div>
    </li>
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>List Item Title 2</h5>
            <p>List item description content...</p>
        </div>
    </li>
</ul>

Media List

<style>
    .media-list {
        list-style: none;
        padding: 0;
    }
    .media-list li {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    .media-list .media-image {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        margin-right: 15px;
    }
    .media-list .media-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .media-list .media-body h5 {
        margin-bottom: 5px;
    }
    .media-list .media-body p {
        color: #666;
        margin: 0;
    }
</style>

<ul class="media-list">
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="Article Image">
        </div>
        <div class="media-body">
            <h5>Article Title</h5>
            <p>This is a brief description of the article, introducing its main content...</p>
            <small class="text-muted">2024-01-15</small>
        </div>
    </li>
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="Article Image">
        </div>
        <div class="media-body">
            <h5>Another Article</h5>
            <p>This is another brief article description...</p>
            <small class="text-muted">2024-01-14</small>
        </div>
    </li>
</ul>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Lists Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .menu a i { margin-right: 8px; }

        .media-list { list-style: none; padding: 0; }
        .media-list li {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #eee;
            background: white;
        }
        .media-list .media-image {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            margin-right: 15px;
        }
        .media-list .media-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
        .media-list .media-body h5 { margin-bottom: 5px; }
        .media-list .media-body p { color: #666; margin: 0; font-size: 14px; }

        ul.custom-bullet { list-style: none; padding-left: 0; }
        ul.custom-bullet li::before {
            content: "✓ ";
            color: #3adb76;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Lists Showcase</h1>

        <div class="demo-section">
            <h3>Horizontal Menu</h3>
            <ul class="menu">
                <li class="is-active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Menu Alignment</h3>
            <p>Center Aligned:</p>
            <ul class="menu align-center">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <p>Right Aligned:</p>
            <ul class="menu align-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
            <p>Expanded:</p>
            <ul class="menu expanded">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Vertical Menu</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li class="is-active"><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li><a href="#"><i class="fi-home"></i> Home</a></li>
                        <li><a href="#"><i class="fi-torso"></i> Profile</a></li>
                        <li><a href="#"><i class="fi-widget"></i> Settings</a></li>
                        <li><a href="#"><i class="fi-mail"></i> Messages</a></li>
                        <li><a href="#"><i class="fi-power"></i> Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Nested Menu</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li>
                            <a href="#">Product Categories</a>
                            <ul class="nested vertical menu">
                                <li><a href="#">Electronics</a></li>
                                <li><a href="#">Home Goods</a></li>
                                <li>
                                    <a href="#">Apparel</a>
                                    <ul class="nested vertical menu">
                                        <li><a href="#">Men</a></li>
                                        <li><a href="#">Women</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Simple Menu</h3>
            <ul class="menu simple">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Menu with Text</h3>
            <ul class="menu">
                <li class="menu-text">Website Name</li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Bulletless List</h3>
            <ul class="no-bullet">
                <li>Bulletless list item 1</li>
                <li>Bulletless list item 2</li>
                <li>Bulletless list item 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Custom Bullet List</h3>
            <ul class="custom-bullet">
                <li>Custom bullet list item 1</li>
                <li>Custom bullet list item 2</li>
                <li>Custom bullet list item 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Definition List</h3>
            <dl>
                <dt>HTML</dt>
                <dd>HyperText Markup Language, used to create web page structure.</dd>
                <dt>CSS</dt>
                <dd>Cascading Style Sheets, used to style web pages.</dd>
                <dt>JavaScript</dt>
                <dd>Scripting language used to implement web page interactions.</dd>
            </dl>
        </div>

        <div class="demo-section">
            <h3>Media List</h3>
            <ul class="media-list">
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>Foundation 6 Release</h5>
                        <p>Foundation 6 brings new features and improvements...</p>
                        <small class="text-muted">2024-01-15</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>Responsive Design Best Practices</h5>
                        <p>Learn how to create responsive websites with Foundation...</p>
                        <small class="text-muted">2024-01-14</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>CSS Grid vs Flexbox</h5>
                        <p>Understanding the pros and cons of both layout methods...</p>
                        <small class="text-muted">2024-01-13</small>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Drilldown Menu</h3>
            <div style="max-width: 300px;">
                <ul class="vertical menu" data-drilldown style="max-width: 300px;">
                    <li>
                        <a href="#">Products</a>
                        <ul class="vertical menu">
                            <li>
                                <a href="#">Electronics</a>
                                <ul class="vertical menu">
                                    <li><a href="#">Phones</a></li>
                                    <li><a href="#">Computers</a></li>
                                    <li><a href="#">Tablets</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Home Goods</a></li>
                            <li><a href="#">Apparel</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Services</a>
                        <ul class="vertical menu">
                            <li><a href="#">Consulting</a></li>
                            <li><a href="#">Technical Support</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

List Best Practices

Semantic: Use appropriate list elements (ul, ol, dl)
Accessibility: Ensure navigation menus can be operated via keyboard
Responsiveness: Consider display effects on different screen sizes
State Feedback: Use .is-active to mark current state
Consistency: Maintain consistent list styles

Summary

In this chapter, we learned:

Horizontal and vertical menus
Menu alignment and active states
Nested menus and Drilldown menus
Menus with icons
Unordered lists and definition lists
Media lists

Next chapter, we will learn Foundation Tabs.

Tip: Lists are one of the most commonly used elements in web pages. Using Foundation's menu classes wisely can help you quickly create beautiful navigation.

Foundation Lists

Basic Menu

Vertical Menu

Menu Alignment

Center Aligned

Right Aligned

Expanded

Active State

Nested Menu

Menus with Icons

Icon-Only Menu

Simple Menu

Menu Text

Responsive Menu

Drilldown Menu

Definition Lists

Basic Definition List

Horizontal Definition List

Unordered List Styles

Bulletless List

Custom Bullets

Lists with Cards

Media List

Complete Example

List Best Practices

Summary

#Foundation Lists

#Basic Menu

#Vertical Menu

#Menu Alignment

#Center Aligned

#Right Aligned

#Expanded

#Active State

#Nested Menu

#Menus with Icons

#Icon-Only Menu

#Simple Menu

#Menu Text

#Responsive Menu

#Drilldown Menu

#Definition Lists

#Basic Definition List

#Horizontal Definition List

#Unordered List Styles

#Bulletless List

#Custom Bullets

#Lists with Cards

#Media List

#Complete Example

#List Best Practices

#Summary

Foundation Lists

Basic Menu

Vertical Menu

Menu Alignment

Center Aligned

Right Aligned

Expanded

Active State

Nested Menu

Menus with Icons

Icon-Only Menu

Simple Menu

Menu Text

Responsive Menu

Drilldown Menu

Definition Lists

Basic Definition List

Horizontal Definition List

Unordered List Styles

Bulletless List

Custom Bullets

Lists with Cards

Media List

Complete Example

List Best Practices

Summary