Menus

Simple CSS for menus.

Vertical Menu

Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.

Yahoo Sites
<style>
.custom-restricted-width {
    /* To limit the menu width to the content of the menu: */
    display: inline-block;
    /* Or set the width explicitly: */
    /* width: 10em; */
}
</style>
<div class="pure-menu custom-restricted-width">
    <span class="pure-menu-heading">Yahoo Sites</span>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-heading">More Sites</li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
    </ul>
</div>

Horizontal Menu

To create a horizontal menu, add the pure-menu-horizontal class name.

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

Selected and Disabled Items

Mark a selected list element by adding the pure-menu-selected class to the list element. To mark a link as disabled, add an <a> element with the pure-menu-disabled class name. Disabled items appear faded and do not inherit hover styles.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Selected</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Normal</a></li>
        <li class="pure-menu-item pure-menu-disabled">Disabled</li>
    </ul>
</div>

We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, an example script written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.

Even with JavaScript in place, you still might want to display submenus on hover. Just add pure-menu-allow-hover to the pure-menu-has-children list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Vertical Menu with Submenus

The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.

<div class="pure-menu custom-restricted-width">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-item pure-menu-has-children">
            <a href="#" id="menuLink1" class="pure-menu-link">More</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
                <li class="pure-menu-item pure-menu-has-children">
                    <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Foo</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Bar</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Baz</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Scrollable Horizontal Menu

To create a scrollable horizontal menu, add the pure-menu-scrollable class name. When there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported.

<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
    </ul>
</div>

Scrollable Vertical Menu

To create a scrollable vertical menu, limit the height of your menu, and then add the pure-menu-scrollable class name. The menu items can be scrolled or flicked. Submenus are not supported.

<style>
/* Customization to limit height of the menu */
.custom-restricted {
    height: 160px;
    width: 150px;
    border: 1px solid gray;
    border-radius: 4px;
}
</style>
<div class="pure-menu pure-menu-scrollable custom-restricted">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
    </ul>
</div>

Responsive Menus That Hide

Check out our Layout Examples to see how you can use Pure as a foundation for more complex menus, such as: