Skip to content

Menus with PureCSS


After a introduction to PureCSS on a previous entrance where I explained why I like this project, today let’s see how easy we can include PureCSS in our development projects.


The way of creating menus is to list items <li> inside an unorder list <ul>, and the CSS prettify everything. Let’s write an example list:

	<li><a href="plantilla_purecss.html">Plantilla</a></li>
	<li><a href="purecss_botones.html">Botones</a></li>
	<li><a href="purecss_form0.html">Formulario Paso 0</a></li>
Preparando el menu

Preparing menu items

Menus are by default vertical, and they adjust to the width of the DIV element that have it. You need the classes pure-menu and pure-menu-open:

Menu vertical

Menu vertical

If you want to stand out an option, you can use the pure-menu-selected class, and you’ll have darker text .

If you want to createl horizontal menu, it is neccesary to add three classes: pure-menu, pure-menu-open and pure-menu-horizontal. Also, you can create headers on the menu by adding the pure-menu-heading class, with this outcome:

Menu horizontal

Horizontal Menu

Her you can see it, but also, you have the code available on GitHub.


An alternative to menus are paginators, that you can achieve it with the pure-paginator class, applied to the <ul> element. The <li> items of the list can receive the pure-button class (we’ll see in more depth on a next entrance).



A little bit disappointed …

In my opinion, I was a little disspointed with the way of creating menus with PureCSS lacks, and I have seen (and used) better options. First of all, you are limited to only one level. I don’t see any advantage of using the pure-menu-heading class, except if the user code more customization via CSS, and if you need a menu with more that one level, the alternative proposed is to use YUI, with Javascript.

As you can imagine, paginators is not a feature very attractive to me!.

Maybe, you can feel as I do, but … although this part of the PureCSS is not what I expect it doesn’t mean that other options work this way! In fact, there are several cool features of PureCSS that I really like!

… eh, wait a minute …

After this disappointed, I visit the Pure CSS GitHub page, and I ascertain a complementary project called pure-dropdown-menu (NOTE: this is not an official project) that allow you to create horizontal cascade menus (several levels) only by adding extra CSS code (I included it on manejandodatos_css.css). Of course, in order to use it, you need to know the use of a few extra classes!

First of all, the base is an horizontal menú, (see the first part of this entrance). Next, eit is compulsory to follow this rules:

  • The unorder lists <ul> need the pure-menu-children class
  • Every <li> item that links to a new menu level need to have the pure-menu-can-have-children class
  • In order to have the arrow indicating a new menu level, just add the pure-menu-label class

And the outcome is:

Menu horizontal con dropdown

Dropdown Menu

After that, I hope you get a better concept of PureCSS, as I got now! And the best is, …

Everything is CSS … no Javascript!

Have a nice day!!

Manejando Datos Newsletter

Noticias, entradas, eventos, cursos, … News, entrances, events, courses, …

Gracias por unirte a la newsletter. Thanks for joining the newsletter.