UCLA Design System

Mega Menu

The mega menu component adapts a large number of options or to show lower-level pages at first sight.

Parent Nav Item

The parent navigation item inherits CSS classes from the primary navigation item with children. The .ucla-main-nav__item--has-mega-menu CSS class is added to the <li> element.

  • Parent Item
    • <!-- ... -->
<li class="ucla-main-nav__item ucla-main-nav__item--has-children ucla-main-nav__item--has-mega-menu">
  <a href="#" class="ucla-main-nav__link">Parent Item</a>
  <button class="ucla-main-nav__toggle" aria-expanded="false" aria-label="toggle">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="12 17.2 24 14.8"><title>Arrow Down</title><path class="down-arrow--blue" d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"></path></svg>
  </button>
  <!-- ... -->
</li>
<!-- ... -->

    Mega Menu Container

    The mega menu container is the full-width dropdown that holds the content in your mega menu sub-navigation. This will be nested inside the <li> element.

    <!-- ... -->
<li class="ucla-main-nav__item ucla-main-nav__item--has-children ucla-main-nav__item--has-mega-menu">
  <!-- ... -->
  <div class="ucla-main-nav__mega-menu">
    <!-- ... -->
  </div>
</li>
<!-- ... -->

    Mega Menu Content

    Columns

    The content inside the mega menu container supports any element in the Design System. You would utilize this by using the Grid System with a container. The example below is using a 4-Column Grid.

    <!-- ... -->
  <div class="ucla-main-nav__mega-menu">
    <div class="container">
      <div class="ucla-grid cols-4-lg">

        <div> <!-- ... --> </div>
        <div> <!-- ... --> </div>
        <div> <!-- ... --> </div>
        <div> <!-- ... --> </div>

      </div>
    </div>
  </div>
<!-- ... -->

    Navigation Headers and Links

    For navigation headers, you can use the .ucla-main-nav__mega-menu-header class on any text element. Please follow the W3C Standards for heading ranks.

    The navigation list structure is as follows:

    • .ucla-main-nav__mega-menu-list - <ul>
      • .ucla-main-nav__mega-menu-item - <li>
        • .ucla-main-nav__mega-menu-link - <a>
    <!-- ... -->
  <div class="ucla-grid cols-4-lg">
    <!-- ... -->

    <div>
      <p class="ucla-main-nav__mega-menu-header">Mega Menu Heading</p>
      <ul class="ucla-main-nav__mega-menu-list">
        <li class="ucla-main-nav__mega-menu-item">
          <a class="ucla-main-nav__mega-menu-link" href="#">Nav Item</a>
        </li>

        <!-- ... -->

      </ul>
    <div>

    <!-- ... -->

  </div>
<!-- ... -->