垦荒学园

English

简体中文

English

简体中文

Toggle theme

Foundation Top Bar ​

Foundation Top Bar is a responsive navigation component suitable for website main navigation. This chapter will introduce various uses of top bars.

Basic Top Bar ​

Use the .top-bar class to create a basic navigation bar:

html
<div class="top-bar">
    <div class="top-bar-left">
        <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="#">Services</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><a href="#">Login</a></li>
            <li><a href="#">Register</a></li>
        </ul>
    </div>
</div>

Top Bar with Dropdown Menu ​

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Brand</li>
            <li>
                <a href="#">Products</a>
                <ul class="menu vertical">
                    <li><a href="#">Product A</a></li>
                    <li><a href="#">Product B</a></li>
                    <li><a href="#">Product C</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Services</a>
                <ul class="menu vertical">
                    <li><a href="#">Consulting</a></li>
                    <li><a href="#">Technical Support</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</div>

Responsive Top Bar ​

Show hamburger menu on small screens:

html
<!-- Title Bar (shown on mobile) -->
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
    <div class="title-bar-title">Menu</div>
</div>

<!-- Top Bar -->
<div class="top-bar" id="responsive-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Website Name</li>
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Products</a>
                <ul class="menu vertical">
                    <li><a href="#">Product A</a></li>
                    <li><a href="#">Product B</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li>
        </ul>
    </div>
</div>

Stacked Top Bar ​

Stack vertically on small screens:

html
<div class="top-bar stacked-for-medium">
    <div class="top-bar-left">
        <ul class="menu">
            <li class="menu-text">Brand</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>
html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="menu">
            <li class="menu-text">Logo</li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Categories</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li>
                <div class="input-group">
                    <input class="input-group-field" type="search" placeholder="Search...">
                    <div class="input-group-button">
                        <button class="button" type="button">
                            <i class="fi-magnifying-glass"></i>
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Custom Styles ​

Dark Top Bar ​

html
<style>
    .top-bar.dark {
        background: #333;
    }
    .top-bar.dark .menu a {
        color: #fff;
    }
    .top-bar.dark .menu a:hover {
        color: #ccc;
    }
    .top-bar.dark .menu-text {
        color: #fff;
    }
</style>

<div class="top-bar dark">
    <!-- Content -->
</div>

Transparent Top Bar ​

html
<style>
    .top-bar.transparent {
        background: transparent;
        position: absolute;
        width: 100%;
        z-index: 100;
    }
    .top-bar.transparent .menu a {
        color: #fff;
    }
</style>

Fixed Top Bar ​

html
<style>
    .top-bar.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    body {
        padding-top: 60px; /* Top bar height */
    }
</style>

<div class="top-bar fixed">
    <!-- Content -->
</div>

Top Bar with User Info ​

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Logo</li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/30" style="border-radius: 50%; vertical-align: middle;">
                    John
                </a>
                <ul class="menu vertical">
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Complete Example ​

html
<!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 Top Bar 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;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .top-bar.dark {
            background: #2c3e50;
        }
        .top-bar.dark .menu a { color: #ecf0f1; }
        .top-bar.dark .menu a:hover { color: #bdc3c7; }
        .top-bar.dark .menu-text { color: #fff; }
        .top-bar.dark .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
            border-color: #ecf0f1 transparent transparent;
        }

        .top-bar.primary {
            background: #1779ba;
        }
        .top-bar.primary .menu a { color: #fff; }
        .top-bar.primary .menu a:hover { color: rgba(255,255,255,0.8); }
        .top-bar.primary .menu-text { color: #fff; }

        .main-content {
            padding: 40px 0;
        }
    </style>
</head>
<body>
    <!-- Responsive Top Bar Example -->
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="main-menu"></button>
        <div class="title-bar-title">Menu</div>
    </div>

    <div class="top-bar dark" id="main-menu">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Foundation</li>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Products</a>
                    <ul class="menu vertical">
                        <li><a href="#">Product A</a></li>
                        <li><a href="#">Product B</a></li>
                        <li>
                            <a href="#">More Products</a>
                            <ul class="menu vertical">
                                <li><a href="#">Product C</a></li>
                                <li><a href="#">Product D</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Services</a>
                    <ul class="menu vertical">
                        <li><a href="#">Consulting</a></li>
                        <li><a href="#">Technical Support</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <div class="input-group" style="margin: 0;">
                        <input class="input-group-field" type="search" placeholder="Search..." style="height: 2.2rem;">
                        <div class="input-group-button">
                            <button class="button" type="button" style="padding: 0.5rem 0.8rem;">
                                <i class="fi-magnifying-glass"></i>
                            </button>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><i class="fi-torso"></i> User</a>
                    <ul class="menu vertical">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div class="main-content">
        <div class="grid-container">
            <div class="demo-section">
                <h3>Basic Top Bar</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li class="menu-text">Brand</li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Register</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>Themed Top Bar</h3>
                <div class="top-bar primary">
                    <div class="top-bar-left">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <li class="menu-text">Logo</li>
                            <li><a href="#">Home</a></li>
                            <li>
                                <a href="#">Products</a>
                                <ul class="menu vertical">
                                    <li><a href="#">Product A</a></li>
                                    <li><a href="#">Product B</a></li>
                                </ul>
                            </li>
                            <li><a href="#">About</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a class="button small hollow" href="#" style="color: #fff; border-color: #fff;">Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>Top Bar with Search</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li class="menu-text">Search Example</li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><input type="search" placeholder="Search..."></li>
                            <li><button type="button" class="button">Search</button></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>Centered Logo Top Bar</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Products</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-center" style="position: absolute; left: 50%; transform: translateX(-50%);">
                        <span class="menu-text" style="font-size: 1.5rem; font-weight: bold;">LOGO</span>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </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>

Top Bar Best Practices ​

  1. Responsive Design: Ensure good experience on mobile devices
  2. Clear Hierarchy: Organize menu structure reasonably
  3. Accessibility: Support keyboard navigation
  4. Highlight Priority: Highlight important links and current page
  5. Simple Design: Avoid too many menu items

Summary ​

In this chapter, we learned:

  • Creating basic top bars
  • Top bars with dropdown menus
  • Responsive top bars
  • Custom styles (dark, transparent, fixed)
  • Top bars with search boxes and user info

Next chapter, we will learn Foundation Sidebar.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About