Article Categories

Selected Reading

Design a Vertical and Horizontal menu using Pure CSS

CSS Web Development Front End Technology

The menu is a crucial component of any website. It helps visitors find content and directs them to key sections. CSS is excellent for creating stunning navigation menus that can be displayed either horizontally or vertically.

In this article, we'll design vertical and horizontal menus using Pure CSS framework with HTML <div> and <span> tags.

Syntax

Pure CSS menu uses the following basic structure

.pure-menu {
    /* Base menu container */
}

.pure-menu-horizontal {
    /* Horizontal layout modifier */
}

.pure-menu-list {
    /* Menu items container */
}

.pure-menu-item {
    /* Individual menu item */
}

.pure-menu-link {
    /* Menu link styling */
}

Note: Pure CSS framework is required. Include it via CDN: <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

Example: Vertical Menu

The following example creates a vertical menu using Pure CSS classes

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
    <style>
        body {
            background-color: #f0f8ff;
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .pure-menu-heading {
            background-color: #2c3e50;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="pure-menu">
        <span class="pure-menu-heading">TUTORIALSPOINT</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item">
                <a href="/index.htm" class="pure-menu-link">Home</a>
            </li>
            <li class="pure-menu-item">
                <a href="/codingground.htm" class="pure-menu-link">Coding Ground</a>
            </li>
            <li class="pure-menu-item">
                <a href="/online_dev_tools.htm" class="pure-menu-link">Tools</a>
            </li>
            <li class="pure-menu-item">
                <a href="/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
            </li>
        </ul>
    </div>
</body>
</html>

A vertical menu appears with "TUTORIALSPOINT" as the heading in a dark blue background, followed by menu items (Home, Coding Ground, Tools, Contact Us) stacked vertically as clickable links.

Example: Horizontal Menu

The following example creates a horizontal menu by adding the pure-menu-horizontal class

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .pure-menu-horizontal {
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .pure-menu-heading {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            font-weight: bold;
        }
        .pure-menu-link:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="pure-menu pure-menu-horizontal">
        <span class="pure-menu-heading">TUTORIALSPOINT</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item">
                <a href="/index.htm" class="pure-menu-link">Home</a>
            </li>
            <li class="pure-menu-item">
                <a href="/codingground.htm" class="pure-menu-link">Coding Ground</a>
            </li>
            <li class="pure-menu-item">
                <a href="/online_dev_tools.htm" class="pure-menu-link">Tools</a>
            </li>
            <li class="pure-menu-item">
                <a href="/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
            </li>
        </ul>
    </div>
</body>
</html>

A horizontal menu appears with "TUTORIALSPOINT" heading in blue background on the left, followed by menu items (Home, Coding Ground, Tools, Contact Us) arranged horizontally in a row with hover effects.

Key Differences

Aspect	Vertical Menu	Horizontal Menu
Class	`pure-menu`	`pure-menu pure-menu-horizontal`
Layout	Items stacked vertically	Items arranged horizontally
Best Use	Sidebars, navigation panels	Header navigation, main menu bars

Conclusion

Pure CSS framework makes creating both vertical and horizontal menus simple by using predefined classes. The pure-menu-horizontal class transforms a vertical menu into a horizontal layout, making it perfect for responsive navigation systems.

Yaswanth Varma

Updated on: 2026-03-15T17:58:59+05:30

555 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next