diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 9a5939a3b4fdeb115175d406dc9b4906f5947f91..38828d76b352ccdd138c253a70be269979aacda6 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -93,7 +93,7 @@ header#document-header
@include media-breakpoint-up(desktop)
padding-top: $header-nav-padding-y-desktop
padding-bottom: $header-nav-padding-y-desktop
- .container
+ > .container
align-items: center
display: flex
flex-wrap: wrap
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 58c3952c392128820300e631e573549b29860a8f..85bf719d0937e6417bb6c2c6b00b88952c00d794 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -60,6 +60,8 @@
&:hover,
&:focus
text-decoration-color: $header-dropdown-color
+ .dropdown-menu-title
+ @include h2
.nav-level-1
display: flex
@@ -103,15 +105,28 @@
margin-top: $spacing0
.has-children:not(.header-i18n) // avoid
@if $header-dropdown-full
- .dropdown-menu:not(.dropdown-languages)
- inset: 100% 0 auto 0
- padding-left: 0
- padding-right: 0
- padding-bottom: $spacing2
- .nav-level-2
- @include container
- @include grid(4, desktop)
- @else
+ .dropdown-menu
+ &:not(.dropdown-languages)
+ inset: 100% 0 auto 0
+ padding-left: 0
+ padding-right: 0
+ padding-bottom: $spacing2
+ &:not(.is-titled)
+ .nav-level-2
+ @include container
+ @include grid(4, desktop)
+ &.is-titled
+ .container
+ align-items: baseline
+ display: flex
+ gap: $grid-gutter
+ .dropdown-menu-title
+ width: col(5)
+ .nav-level-2
+ width: col(7)
+ li
+ margin-bottom: $spacing0
+ @else
position: relative
.dropdown-menu
margin-top: $header-nav-padding-y
@@ -121,6 +136,13 @@
padding-right: $spacing1
right: 0
text-align: right
+ &.is-titled
+ .dropdown-menu-title
+ @include h3
+ margin-bottom: $spacing0
+ .container
+ padding-left: 0
+ padding-right: 0
.nav-level-2
> li
> a
@@ -172,6 +194,10 @@
display: block
.dropdown-menu
padding-left: 0
+ .is-titled
+ .container
+ padding-left: 0
+ padding-right: 0
.nav-level-2
> .has-children + li
margin-top: $spacing1
diff --git a/config.yaml b/config.yaml
index 57d8af3d9bd392b96d0df690d27753038a88accf..91839077a66615f08af1432a74f4f352262504b9 100644
--- a/config.yaml
+++ b/config.yaml
@@ -13,6 +13,8 @@ params:
header: "/assets/images/logo.svg"
footer: "/assets/images/logo.svg"
menu:
+ dropdown:
+ linkToLevel1: true
i18n:
display: true
breadcrumb:
diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html
index b78152f65d0340755d8aef81dcef86d37dbb16a2..8d4857016d16c4cc465f42b6d6d277a3cb6eb068 100644
--- a/layouts/partials/commons/menu.html
+++ b/layouts/partials/commons/menu.html
@@ -1,4 +1,4 @@
-{{- $kind := .kind -}}
+{{ $kind := .kind }}
{{ $items := .items }}
{{ $context := .context }}
{{ if $kind }}
@@ -7,7 +7,8 @@
{{ end }}
{{- $level := .level -}}
{{- $stop := .stop -}}
-{{- $dropdown := .dropdown }}
+{{- $dropdown := .dropdown -}}
+{{- $dropdown_titled := (and site.Params.menu.dropdown.linkToLevel1 (eq $level 1)) -}}
{{- $ulClass := "" -}}
{{- if .class -}}
{{- $ulClass = printf "%s " .class -}}
@@ -16,22 +17,27 @@
<ul class="{{ $ulClass }}{{ if $level }}nav-level-{{ $level }}{{ end }}">
{{ range $items -}}
{{- $slug := urlize .title -}}
- {{- $itemClass := "" -}}
- {{- $linkClass := "" -}}
+ {{- $item_class := "" -}}
+ {{- $link_class := "" -}}
{{- $attr := "" -}}
{{- $attr_title := "" -}}
- {{- $hasDropdown := false -}}
+ {{- $has_dropdown := false -}}
{{ if eq $context.RelPermalink .target }}
- {{ $linkClass = "active" }}
+ {{ $link_class = "active" }}
{{ end }}
{{ if eq $kind "social" }}
- {{- $itemClass = printf .title | lower -}}
+ {{- $item_class = printf .title | lower -}}
{{ end }}
{{- if gt (len .children) 0 -}}
- {{- $itemClass = printf "%shas-children" $itemClass -}}
+ {{- $item_class = printf "%shas-children" $item_class -}}
+ {{ range .children -}}
+ {{- if eq $context.RelPermalink .target }}
+ {{ $link_class = printf "$link_class %s" "has-children-active" }}
+ {{ end }}
+ {{ end -}}
{{- end -}}
{{- if and (gt (len .children) 0) $dropdown (eq $level 1) -}}
- {{- $hasDropdown = true -}}
+ {{- $has_dropdown = true -}}
{{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\"" $slug -}}
{{- end -}}
{{- if and (hasPrefix .target "http") (eq .kind "url") -}}
@@ -39,16 +45,20 @@
{{- $attr_title = printf "title=\"%s - %s\"" .title $extern_link -}}
{{- end -}}
{{- if or (ne $stop 1) (and (eq $stop 1) (ne .kind "blank")) -}}
- <li{{ if ne $itemClass ""}} class="{{ $itemClass }}"{{ end }}>
+ <li{{ if ne $item_class ""}} class="{{ $item_class }}"{{ end }}>
{{- if ne .kind "blank" -}}
- <a href="{{ .target }}"{{ if ne $linkClass ""}} class="{{ $linkClass }}"{{ end }} {{ safeHTMLAttr $attr }} {{ safeHTMLAttr $attr_title }}>{{ .title }}</a>
+ <a href="{{ .target }}"{{ if ne $link_class ""}} class="{{ $link_class }}"{{ end }} {{ safeHTMLAttr $attr }} {{ safeHTMLAttr $attr_title }}>{{ .title }}</a>
{{- else -}}
- <span class="{{ if ne $linkClass ""}} {{ $linkClass }}{{ end }}{{ if gt .level 1 }} disabled{{ end }}" {{ safeHTMLAttr $attr }}>{{ .title }}</span>
+ <span class="{{ if ne $link_class ""}} {{ $link_class }}{{ end }}{{ if gt .level 1 }} disabled{{ end }}" {{ safeHTMLAttr $attr }}>{{ .title }}</span>
{{- end -}}
{{- if ne $stop $level -}}
- {{- if $hasDropdown }}
- <div class="dropdown-menu" aria-labelledby="dropdown-{{ $slug }}">
- {{- end -}}
+ {{- if $has_dropdown }}
+ <div class="dropdown-menu {{ if $dropdown_titled }}is-titled{{ end }}" aria-labelledby="dropdown-{{ $slug }}">
+ {{- if $dropdown_titled }}
+ <div class="container">
+ <a href="{{ .target }}" class="dropdown-menu-title">{{ .title }}</a>
+ {{ end -}}
+ {{- end -}}
{{- if gt (len .children) 0 -}}
{{- $nextLevel := add $level 1 -}}
{{- partial "commons/menu.html"
@@ -58,8 +68,11 @@
"context" $context
) -}}
{{- end -}}
- {{- if $hasDropdown -}}
- </div>
+ {{- if $has_dropdown -}}
+ </div>
+ {{- if $dropdown_titled }}
+ </div>
+ {{- end -}}
{{- end -}}
{{- end -}}
</li>