Menu | siimple css

A vertical navigation component

Creating a menu with siimple is also quite easy. The first thing to do is to add the div that will contain it. Create a div and add the class siimple-menu to it. But wait, if you don't put something inside it, it'll be just an empty box. The menu element in siimple can be divided in groups, so try to add one now using the class siimple-menu-group:

<div class="siimple-menu">
    <div class="siimple-menu-group">GROUP 1</div>
</div>

Now we have to fill the group with some items. To do it, simply add as many links with the class siimple-menu-item as you want:

<div class="siimple-menu">
    <div class="siimple-menu-group">GROUP 1</div>
    <a class="siimple-menu-item">Item 1</a>
    <a class="siimple-menu-item">Item 2</a>
</div>

The items of the element are not contained inside the element with the class siimple-menu-group.

There's one more thing to mention about the menu element: the submenus. They are divs with the class siimple-menu-submenu added that contain the items that belong to them. This is how the full menu looks:

<div class="siimple-menu">
    <div class="siimple-menu-group">GROUP 1</div>
    <a class="siimple-menu-item">Item 1</a>
    <a class="siimple-menu-item">Item 2</a>
    <div class="siimple-menu-submenu">
        <div class="siimple-menu-item">Item 3</div>
        <div class="siimple-menu-item">Item 4</div>
        <div class="siimple-menu-sub">
            <div class="siimple-menu-item">Item 5</div>
        </div>
    </div>
</div>

In the case of the subgroups, the items that belong to them are actually contained inside them.

Selected item

Added in v3.1.0.

Add siimple-menu-item--selected to a item of the menu to mark it as a selected.

<div class="siimple-menu">
    <div class="siimple-menu-group">GROUP 1</div>
    <a class="siimple-menu-item">Item 1</a>
    <a class="siimple-menu-item siimple-menu-item--selected">Item 2</a>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.