diff --git a/source/_patterns/03-layouts/navigation/_navigation.scss b/source/_patterns/03-layouts/navigation/_navigation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..89bbcf8b85f6bac6ae29e09f0fb129f4bea9aa5e
--- /dev/null
+++ b/source/_patterns/03-layouts/navigation/_navigation.scss
@@ -0,0 +1,171 @@
+.has-submenu:hover {
+ .menu__subnav {
+ display: block;
+ }
+}
+
+.uw-main-nav {
+ background-color: #000;
+ display: block;
+ width: 100%;
+
+ .menu--main .menu__subnav .menu__link:hover {
+ background-color: $uw-black;
+ color: $uw-gold;
+ }
+
+ &__wrapper {
+ display: grid;
+ grid-template-columns: 24px auto 30px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ }
+
+ &__home {
+ background: url('../../source/images/icons/home.png') 0 50% no-repeat;
+ grid-column: 1 / 2;
+ }
+
+ &__links {
+ grid-template-columns: 2 / 3;
+ padding: 0 1rem;
+
+ a {
+ color: $uw-white;
+
+ &:hover {
+ color: $uw-gold;
+ }
+ }
+
+ .menu--main {
+ display: flex;
+ flex-wrap: nowrap;
+
+ > .menu__item {
+ > .menu__link {
+ padding: 1rem 0;
+ }
+ }
+
+ .menu__item {
+ flex: 1;
+ text-align: center;
+ }
+
+ .menu__link {
+ padding: 1rem 0;
+ }
+
+ .menu__subnav {
+ background-color: $uw-black;
+ position: inherit;
+
+ &--outside-wrapper {
+ background-color: transparent;
+ left: 0;
+ position: fixed;
+ width: 100%
+ }
+
+ &--inside-wrapper {
+ background-color: $uw-black;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ }
+
+ .menu__subnav:hover {
+ display: block;
+ }
+
+ .menu__link {
+ text-align: left;
+ width: 100%;
+ }
+
+ .has-children {
+ .menu__subnav li {
+ padding-left: 1.5rem;
+ }
+ }
+ }
+ }
+
+ .has-submenu > .menu__subnav {
+ background: transparent;
+ margin: 0 -1000em; /* trick from css-tricks comments */
+ padding: 0 1000em; /* trick from css-tricks comments */
+ z-index: 10000;
+ }
+
+ .has-submenu {
+ > a::after {
+ border: solid $uw-white;
+ border-width: 0 3px 3px 0;
+ content: '';
+ display: inline-block;
+ padding: 3px;
+ -webkit-transform: rotate(45deg) translateY(-5px);
+ transform: rotate(45deg) translateY(-5px);
+ }
+ }
+ }
+
+ &__more {
+ background: url('../../source/images/icons/dots.png') 0 50% no-repeat;
+ background-position: center;
+ grid-column: 3 / 4;
+ position: relative;
+
+ &:hover {
+ .menu--main-more {
+ display: block;
+ }
+ }
+
+ .menu--main-more {
+ background: transparent;
+ display: none;
+ margin: 0 -1000em; /* trick from css-tricks comments */
+ padding: 0 1000em; /* trick from css-tricks comments */
+ z-index: 10000;
+ }
+
+ .menu__subnav {
+
+ &--outside-wrapper {
+ background-color: transparent;
+ left: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 10000;
+ }
+
+ &--inside-wrapper {
+ background-color: $uw-black;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 3rem;
+ max-width: 63rem;
+ padding: 1rem;
+
+ li {
+ padding: 1rem 0;
+ }
+
+ a {
+ color: $uw-white;
+ height: 100%;
+ text-decoration: none;
+ width: 100%;
+
+ &:hover {
+ color: $uw-gold;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/source/_patterns/03-layouts/navigation/navigation.twig b/source/_patterns/03-layouts/navigation/navigation.twig
index 7c9083e88064cd2775f0764efff01111562576fb..cfdc77ca40f40d4d8bf4c8292fc207277f91b2b4 100644
--- a/source/_patterns/03-layouts/navigation/navigation.twig
+++ b/source/_patterns/03-layouts/navigation/navigation.twig
@@ -1,6 +1,33 @@
-<nav class="uw-main-navigation">
- {% include '@components/menu/menu.twig' with {
- 'menu_name': 'main',
- 'items': items
- } %}
+<nav class="uw-main-nav">
+ <div class="uw-main-nav__wrapper">
+ <div class="uw-main-nav__home">
+ <a href="/home" class="uw-site-home__link">
+ <span class="off-screen">Home</span>
+ </a>
+ </div>
+ <div class="uw-main-nav__links">
+ {% if items|length > 5 %}
+ {% set main_links = items|slice(1, 5) %}
+ {% else %}
+ {% set main_links = items %}
+ {% endif %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main',
+ 'items': main_links
+ } %}
+ </div>
+ {% if items|length > 5 %}
+ <div class="uw-main-nav__more">
+ <ul class="menu menu--main-more">
+ <li class="menu__item has-submenu">
+ {% set more_links = items|slice(6, item.length) %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main-more',
+ 'items': more_links
+ } %}
+ </li>
+ </ul>
+ </div>
+ {% endif %}
+ </div>
</nav>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/navigation/navigation.yml b/source/_patterns/03-layouts/navigation/navigation.yml
index fe21bd3f98ec2463f04b872c1b93c9e48bf489e0..13197b224ea0cabc155a430316f579a8ab8fd96c 100644
--- a/source/_patterns/03-layouts/navigation/navigation.yml
+++ b/source/_patterns/03-layouts/navigation/navigation.yml
@@ -28,7 +28,130 @@ items:
attributes:
class: ''
in_active_trail: false
+ submenu:
+ - text: 'Link #1-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-3'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
- text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #4-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #6-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #6-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #7'
url: 'https://uwaterloo.ca/'
original_link:
options:
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 8d867322c24bec9126559adbc99722002abc9c93..ccd5864730f995ceb49477e275570b88375a9f73 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -4,6 +4,9 @@
'menu_name': header_menu_name,
'items': header_items
} %}
+ {% include "@layouts/navigation/navigation.twig" with {
+ 'items': main_menu
+ }%}
{% include "@layouts/footer/footer.twig" with {
'menu_name': footer_menu_name,
'items': footer_items
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index b5464326a4975c80ce0cf9279d686166a30ba01b..ecaf45341b5373c781b700b059717ad23b18a4e6 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -115,4 +115,91 @@ social_media:
url: "https://www.instagram.com/uofwaterloo/"
- text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875"
-social_media_placement: "global-site-footer"
\ No newline at end of file
+social_media_placement: "global-site-footer"
+main_menu:
+ - text: 'Home'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #1-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #4-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #7'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig
index 2b0b64140f558b036118eb357deb1645d1b66798..089a98267260e9f05ba1c466f234e72a8e686bcd 100644
--- a/source/_patterns/04-components/menu/menu.twig
+++ b/source/_patterns/04-components/menu/menu.twig
@@ -18,9 +18,20 @@
'class': additional_classes
} %}
<ul {{ add_attributes(additional_attributes) }}>
+
+ {% if menu_name == 'main-more' %}
+ <div class="menu__subnav--outside-wrapper ML0">
+ <div class="menu__subnav--inside-wrapper ML0">
+ {% endif %}
+
{% else %}
<ul class="menu menu__subnav">
+ {% if menu_level == 1 and menu_name != 'main-more' %}
+ <div class="menu__subnav--outside-wrapper ML1">
+ <div class="menu__subnav--inside-wrapper ML1">
+ {% endif %}
{% endif %}
+
{% for item in items %}
{% set item_classes = ['menu__item'] %}
@@ -52,6 +63,20 @@
{% set link_classes = link_classes|merge(link_class) %}
{% endif %}
+ {% if item.below %}
+ {% if menu_level == 0 %}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+ {% elseif menu_level <= 2 %}
+ {% set item_classes = item_classes|merge(['has-children']) %}
+ {% endif %}
+ {% elseif item.submenu %}
+ {% if menu_level == 0 %}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+ {% elseif menu_level <= 2 %}
+ {% set item_classes = item_classes|merge(['has-children']) %}
+ {% endif %}
+ {% endif %}
+
{% set additional_item_attributes = {
'class': item_classes
} %}
@@ -75,6 +100,12 @@
{% endif %}
</li>
{% endfor %}
- </ul>
+
+ {% if menu_level == 1 or menu_name == 'main-more' %}
+ </div></div></ul>
+ {% else %}
+ </ul>
+ {% endif %}
+
{% endif %}
{% endmacro %}
diff --git a/source/images/icons/dots.png b/source/images/icons/dots.png
new file mode 100644
index 0000000000000000000000000000000000000000..76509657bf49f826c06ed81c39df691197b8bf97
Binary files /dev/null and b/source/images/icons/dots.png differ
diff --git a/source/images/icons/home.png b/source/images/icons/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f71ffd4fa973afb1325f37fbfda24b7caa77e3a
Binary files /dev/null and b/source/images/icons/home.png differ