Go to main content
Go to KTH Intranet

Mega-menu (in header)

Global navigation links to different pages within the same "entrance"

When to use

When not to use

  • For pages that are not part of kth.se, intranet or student web.
  • You are making an app where users should not leave in any intermediate step. For example: account activation

How to use

Wide version

Code 
<header class="kth-header external">
  <div class="kth-header__container">
    <nav class="kth-mega-menu">
      <ul>
        <li>
          <a href="#" class="kth-menu-item dropdown"> Item 1 </a>
        </li>
        <li>
          <a href="#" class="kth-menu-item dropdown"> Item 2 </a>
        </li>
        <li>
          <a href="#" class="kth-menu-item dropdown"> Item 3 </a>
        </li>
        <li>
          <a href="#" class="kth-menu-item dropdown"> Item 4 </a>
        </li>
      </ul>
    </nav>
  </div>
</header>
@use "@kth/style/scss/components/header.scss";
@use "@kth/style/scss/components/menu-item.scss";
@use "@kth/style/scss/components/mega-menu.scss";
  • Menu items are exposed in an horizontal list.
  • Read menu item to add style and JavaScript behavior.

Mobile version

  • Show only one button that expands the whole menu
  • Use menu item to style it.
  • Use [TODO] to add the panel that opens the menu