Küljemenüü

Küljemenüü on kogu lehe pikkune ja ulatub alati jaluseni. Kui lehe sisu on pikem ning jalus ei ole lehele minnes kohe näha, siis on ka menüü taust pikem. Menüü võib sisaldada mitut taset menüüpunkte. Menüül võib sisaldada pealkirju.

Preview 
<nav class="side-menu">
    <h3 class="side-menu__title">Menüü pealkiri</h3>
    <ul class="side-menu__top">
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
    </ul>
</nav>
 
{
  "title": "Menüü pealkiri",
  "showTitle": true,
  "items": [
    {
      "name": "Menüüpunkt"
    },
    {
      "name": "Menüüpunkt"
    },
    {
      "name": "Menüüpunkt"
    }
  ]
}

Alammenüüga

Preview 
<nav class="side-menu">
    <h3 class="side-menu__title">Menüü pealkiri</h3>
    <ul class="side-menu__top">
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt alammenüüga
                
                <i class="fas fa-chevron-down side-menu__icon" ></i>
                             </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt alammenüüga
                
                <i class="fas fa-chevron-down side-menu__icon is-open" ></i>
            </a>
            <ul class="side-menu__sub">
                <li class="side-menu__item">
                    <a class="side-menu__link" href="#">Alammenüüpunkt</a>
                </li>
                <li class="side-menu__item">
                    <a class="side-menu__link" href="#">Alammenüüpunkt</a>
                </li>
            </ul>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
    </ul>
</nav>
 
{
  "title": "Menüü pealkiri",
  "showTitle": true,
  "items": [
    {
      "name": "Menüüpunkt alammenüüga",
      "open": null,
      "subitems": [
        {
          "name": "Alammenüüpunkt"
        },
        {
          "name": "Alammenüüpunkt"
        }
      ]
    },
    {
      "name": "Menüüpunkt alammenüüga",
      "open": true,
      "subitems": [
        {
          "name": "Alammenüüpunkt"
        },
        {
          "name": "Alammenüüpunkt"
        }
      ]
    },
    {
      "name": "Menüüpunkt"
    },
    {
      "name": "Menüüpunkt"
    }
  ]
}

Ilma pealkirjata

Preview 
<nav class="side-menu">

    <ul class="side-menu__top">
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
                
                <i class="fas fa-chevron-down side-menu__icon" ></i>
                             </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
                
                <i class="fas fa-chevron-down side-menu__icon is-open" ></i>
            </a>
            <ul class="side-menu__sub">
                <li class="side-menu__item">
                    <a class="side-menu__link" href="#">Alammenüüpunkt</a>
                </li>
                <li class="side-menu__item">
                    <a class="side-menu__link" href="#">Alammenüüpunkt</a>
                </li>
            </ul>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
        <li class="side-menu__item">
            <a class="side-menu__link" href="#">Menüüpunkt
            </a>
        </li>
    </ul>
</nav>
 
{
  "title": "Menüü pealkiri",
  "showTitle": null,
  "items": [
    {
      "name": "Menüüpunkt",
      "open": null,
      "subitems": [
        {
          "name": "Alammenüüpunkt"
        }
      ]
    },
    {
      "name": "Menüüpunkt",
      "open": true,
      "subitems": [
        {
          "name": "Alammenüüpunkt"
        },
        {
          "name": "Alammenüüpunkt"
        }
      ]
    },
    {
      "name": "Menüüpunkt"
    },
    {
      "name": "Menüüpunkt"
    }
  ]
}