Päise menüü

Preview 
<nav data-menu="main">
    <ul class="mainmenu ">
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-users mainmenu__icon " ></i>
                    Menüü
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
            <div class="mainmenu__container">
                <ul class="mainmenu__sub ">
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü alamenüü
                                        </a>
                        <ul class="mainmenu__sub ">
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                        </ul>
                    </li>
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü pealkiri väga pika tekstiga
                                        </a>
                    </li>
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü alamenüü
                                        </a>
                        <ul class="mainmenu__sub ">
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü alamenüü
                                                        </a>
                                <ul class="mainmenu__sub ">
                                    <li class="mainmenu__item">
                                        <a href="#">
                                                                            Menüü pealkiri
                                                                        </a>
                                    </li>
                                    <li class="mainmenu__item">
                                        <a href="#">
                                                                            Menüü pealkiri
                                                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </li>
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-info-circle mainmenu__icon mainmenu__icon--hilight" ></i>
                    Menüü
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
            <div class="mainmenu__container">
                <ul class="mainmenu__sub ">
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü pealkiri
                                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-users mainmenu__icon " ></i>
                    Kursor menüü kohal
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
        </li>
    </ul>
</nav>

<!--

<div class="megamenu">
    <ul>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
        <li>
            <a href="#">Menu level1</a>
            <ul>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a>
                    <ul>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                    </ul>
                </li>
                <li><a href="#">LEvel 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
    </ul>
</div>-->
 
{
  "menu": [
    {
      "text": "Menüü",
      "icon": "users",
      "submenu": [
        {
          "text": "Menüü alamenüü",
          "submenu": [
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            }
          ]
        },
        {
          "text": "Menüü pealkiri väga pika tekstiga"
        },
        {
          "text": "Menüü alamenüü",
          "submenu": [
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü alamenüü",
              "submenu": [
                {
                  "text": "Menüü pealkiri"
                },
                {
                  "text": "Menüü pealkiri"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "text": "Menüü",
      "icon": "info-circle",
      "submenu": [
        {
          "text": "Menüü pealkiri"
        }
      ],
      "icon-modifiers": "mainmenu__icon--hilight"
    },
    {
      "text": "Kursor menüü kohal",
      "icon": "users"
    }
  ]
}

Hele

Tumedal taustal

Preview 
<nav data-menu="main">
    <ul class="mainmenu mainmenu--light">
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-users mainmenu__icon " ></i>
                    Menüü
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
            <div class="mainmenu__container">
                <ul class="mainmenu__sub ">
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü alamenüü
                                        </a>
                        <ul class="mainmenu__sub ">
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                        </ul>
                    </li>
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü pealkiri väga pika tekstiga
                                        </a>
                    </li>
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü alamenüü
                                        </a>
                        <ul class="mainmenu__sub ">
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü pealkiri
                                                        </a>
                            </li>
                            <li class="mainmenu__item">
                                <a href="#">
                                                            Menüü alamenüü
                                                        </a>
                                <ul class="mainmenu__sub ">
                                    <li class="mainmenu__item">
                                        <a href="#">
                                                                            Menüü pealkiri
                                                                        </a>
                                    </li>
                                    <li class="mainmenu__item">
                                        <a href="#">
                                                                            Menüü pealkiri
                                                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </li>
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-info-circle mainmenu__icon mainmenu__icon--hilight" ></i>
                    Menüü
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
            <div class="mainmenu__container">
                <ul class="mainmenu__sub ">
                    <li class="mainmenu__item">
                        <a href="#">
                                            Menüü pealkiri
                                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="mainmenu__item">
            <a href="#">
                    
                    <i class="fas fa-users mainmenu__icon " ></i>
                    Kursor menüü kohal
                    
                    <i class="fas fa-chevron-down mainmenu__icon" ></i>
                </a>
        </li>
    </ul>
</nav>

<!--

<div class="megamenu">
    <ul>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
        <li>
            <a href="#">Menu level1</a>
            <ul>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a></li>
                <li><a href="#">LEvel 2</a>
                    <ul>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                        <li><a href="#">LEvel 3</a></li>
                    </ul>
                </li>
                <li><a href="#">LEvel 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
        <li><a href="#">Menu level1</a></li>
    </ul>
</div>-->
 
{
  "menu": [
    {
      "text": "Menüü",
      "icon": "users",
      "submenu": [
        {
          "text": "Menüü alamenüü",
          "submenu": [
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            }
          ]
        },
        {
          "text": "Menüü pealkiri väga pika tekstiga"
        },
        {
          "text": "Menüü alamenüü",
          "submenu": [
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü pealkiri"
            },
            {
              "text": "Menüü alamenüü",
              "submenu": [
                {
                  "text": "Menüü pealkiri"
                },
                {
                  "text": "Menüü pealkiri"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "text": "Menüü",
      "icon": "info-circle",
      "submenu": [
        {
          "text": "Menüü pealkiri"
        }
      ],
      "icon-modifiers": "mainmenu__icon--hilight"
    },
    {
      "text": "Kursor menüü kohal",
      "icon": "users"
    }
  ],
  "mainmenu-modifiers": "mainmenu--light"
}
  • Handle: @main-menu--light
  • Tags:
  • Variants (2): default, light
  • Preview:
  • Filesystem Path: src/70-navigatsioon/main-menu/main-menu.hbs
  • References (1): @icon