University of Florida College of the Arts Pattern Library

Main Navigation Menu 

<div role="navigation" aria-label="Main Navigation" class="main-navigation">
    <ul class="main-navigation__list">
        <li class="main-navigation__item">
            <a class="
                    
                    main-navigation__item-link
                    main-navigation__item-link--active
                    main-navigation__item-link--active-trail
                " href="https://google.com">Programs & Schools
            </a>
        </li>
        <li class="main-navigation__item">
            <a class="
                    
                    main-navigation__item-link
                    
                    
                " href="http://google.com">Admissions & Aid
            </a>
        </li>
        <li class="main-navigation__item">
            <a aria-expanded="false" class="
                    js-mega-menu-toggle
                    main-navigation__item-link
                    
                    
                " href="http://google.com">Research & Creative Work
                <div class="main-navigation__item-link-icon-container">
                    <div class="main-navigation__item-link-icon">
                        <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="_mark icon-right-chevron__shape" fill-rule="evenodd" clip-rule="evenodd" d="M0.400059 0.200059C0.841887 -0.131312 1.46869 -0.041769 1.80006 0.400059L6.00006 6.00006L1.80006 11.6001C1.46869 12.0419 0.841887 12.1314 0.400059 11.8001C-0.0417684 11.4687 -0.131312 10.8419 0.200059 10.4001L3.50006 6.00006L0.200059 1.60006C-0.131312 1.15823 -0.0417684 0.53143 0.400059 0.200059Z" fill="black" />
                        </svg>
                    </div>
                </div>
            </a>
            <div class="main-navigation__children">
                <div data-active="false" class="mega-menu js-mega-menu">
                    <div class="mega-menu__container">
                        <ul class="mega-menu__list">
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Interior Page 1
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Interior Page 2
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                mega-menu__item-link--active
                                                
                                            " href="http://google.com">Interior Page 3
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                mega-menu__item-link--active-trail
                                            " href="http://google.com">Interior Page 4
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Interior Page 5
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Interior Page 6
                                </a>
                            </li>
                            <li class="mega-menu__item">
                                <a class="
                                                mega-menu__item-link
                                                
                                                
                                            " href="http://google.com">Interior Page 7
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="main-navigation__item">
            <a class="
                    
                    main-navigation__item-link
                    
                    
                " href="http://google.com">About
            </a>
        </li>
    </ul>
</div>
 
{{ enqueue_script('main-navigation') }}

<div role="navigation" aria-label="Main Navigation" class="main-navigation">
    <ul class="main-navigation__list">
        {% for item in mainMenu.items %}
        <li class="main-navigation__item">
            <a
                {{ item.children ? 'aria-expanded="false"' }}
                class="
                    {{ item.children ? 'js-mega-menu-toggle' }}
                    main-navigation__item-link
                    {{ item.isActive ? 'main-navigation__item-link--active' }}
                    {{ item.isDescendantActive ? 'main-navigation__item-link--active-trail' }}
                "
                href="{{ item.url }}">{{ item.title }}
                {% if item.children %}
                <div class="main-navigation__item-link-icon-container">
                    <div class="main-navigation__item-link-icon">
                        {% include 'bits/icons/right-chevron.twig' %}
                    </div>
                </div>
                {% endif %}
            </a>
            {% if item.children %}
                <div class="main-navigation__children">
                    <div data-active="false" class="mega-menu js-mega-menu">
                        <div class="mega-menu__container">
                            <ul class="mega-menu__list">
                                {% for item in item.children %}
                                    <li class="mega-menu__item">
                                        <a
                                            class="
                                                mega-menu__item-link
                                                {{ item.isActive ? 'mega-menu__item-link--active' }}
                                                {{ item.isDescendantActive ? 'mega-menu__item-link--active-trail' }}
                                            "
                                            href="{{ item.url }}">{{ item.title }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
 
{
  "mainMenu": {
    "currentPageInMenu": true,
    "items": [
      {
        "title": "Programs & Schools",
        "url": "https://google.com",
        "isActive": true,
        "isChildActive": false,
        "isDescendantActive": true,
        "children": []
      },
      {
        "title": "Admissions & Aid",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      },
      {
        "title": "Research & Creative Work",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": true,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": true,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 4",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": true,
            "children": []
          },
          {
            "title": "Interior Page 5",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 6",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 7",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "About",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      }
    ]
  }
}
  • Content: 
    .main-navigation
    --itemLinkIconColor blue500
    --itemLinkTextColor blue500
    --itemLinkTextColorActive black
    --itemLinkBorderColorActive smokeDarkest
    --itemLinkBorderColorFocus charcoal

    margin-right 16px

    +below(breakpointHeaderLarge)
        display none

    &__list
        display flex
        justify-content space-between

    &__item
        &:not(:last-child)
            margin-left 8px
        &:not(:first-child)
            margin-right 8px

    &__item-link
        @extends $headline6
        align-items center
        color var(--itemLinkTextColor)
        display flex
        font-size 20px
        padding 10px 16px
        position relative
        text-decoration none
        transition all 0.2s
        white-space nowrap

        & ^[0]__item-link-icon svg
            position relative
            transform rotate(90deg)
            transition transform 200ms ease-in-out
            width 24px

            & path
                fill var(--itemLinkIconColor)

        &:focus
        &:hover
        &:active
        &--active
        &--active-trail
        &[aria-expanded=true]
            z-index 12
            & ^[0]__item-link-icon svg
                transform rotate(-90deg)

        &:focus
        &:hover
            color var(--itemLinkTextColorActive)

    &__item-link-icon-container
        align-items center
        display inline-flex
        margin-left 8px
        width 8px

        & .down-toggle-icon__shape
            fill var(--itemLinkIconColor)

.mega-menu
    --backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
    --itemBackgroundColor transparent
    --itemBackgroundColorFocus transparent
    --itemBorderColor blue400
    --itemBorderColorActive orange
    --itemTextColorFocus white

    background var(--backgroundColor)
    position absolute
    left 0
    right 0
    top 100%
    opacity 0
    padding-top 32px
    padding-bottom 32px
    transition all 0.2s

    &:before
    &:after
        background-color var(--backgroundColor)
        bottom 0
        content ""
        display block
        position absolute
        top 0
        width 100vw

    &:before
        right 100%

    &:after
        left 100%

    &__container
        @extends $contentContainer
        display flex

    &__list
        column-count 3
        column-gap 8px
        flex 1

    &__item
        @extends $headline6
        background-color var(--itemBackgroundColor)
        break-inside avoid
        margin-bottom 8px

    &__item-link
        border-top 2px solid var(--itemBorderColor)
        color white
        padding 16px
        position relative
        text-decoration none
        display block
        transition all 0.3s

        &:after
            border-top 2px solid var(--itemBorderColorActive)
            content ""
            height 2px
            left 0
            position absolute
            right 0
            transform scaleX(0)
            transform-origin bottom left
            transition transform 0.3s
            ////transition-delay 0.3
            //transition-property border-top
            top -2px
            width 100%
            z-index 1

        &:focus
        &:hover
            background-color var(--itemBackgroundColorFocus)
            border-top 2px solid transparent
            color var(--itemTextColorFocus)

        &:active
        &--active
        &--active-trail
            background-color var(--itemBackgroundColorFocus)
            border-top 2px solid var(--itemBorderColorActive)
            color var(--itemTextColorFocus)

        &:focus:after
        &:hover:after
        &:active:after
        &--active:after
        &--active-trail:after
            transform scaleX(1)

.mega-menu[data-active=true]
    z-index 12
    opacity 1
    display block
  • URL: /components/raw/main-navigation/main-navigation.styl
  • Filesystem Path: patterns/partials/navigation/main-navigation/main-navigation.styl
  • Size: 3.8 KB
  • Handle: @main-navigation
  • Preview:
  • Filesystem Path: patterns/partials/navigation/main-navigation/main-navigation.twig

No notes defined.