Open In App
Related Articles

Pure CSS Horizontal Menu

Improve Article
Save Article
Like Article

We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars (navbars). 

We will use the following classes to help us achieve the goal at hand:

  • pure-menu: This helps us create a menu. (creates a vertical menu by default)
  • pure-menu-horizontal: This helps us create a horizontal menu.
  • pure-menu-list: This helps us specify the list which contains the menu items.
  • pure-menu-item: This helps us specify that a particular item belongs in the list
  • pure-menu-link: This helps us specify the links in the menu items
  • pure-menu-heading: This helps us specify a heading for our menu


<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-heading">...</li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">

Note: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework

Example: Let us suppose we want to create a horizontal menu for the nav bar of our portfolio. 


<!DOCTYPE html>
    <link rel="stylesheet"
    <!--Custom style for the logo-->
        .logo {
            color: #2f8d46;
            font-weight: bold;
            font-size: 1.5rem;
    <nav class="menu pure-menu pure-menu-horizontal">
        <a href="#" 
           class="logo pure-menu-heading pure-menu-link">
        <ul class="menu pure-menu-list">
            <li class="pure-menu-item">
                <a class="pure-menu-link">
            <li class="pure-menu-item">
                <a class="pure-menu-link">
            <li class="pure-menu-item">
                <a class="pure-menu-link">


Pure CSS Horizontal Menu

Pure CSS Horizontal Menu

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 01 Feb, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials