<div class="c-subpage-nav o-container" data-bkg-theme="base">
<h2 id="subpage-nav-title" class="u-sr-only">Subpage Navigation</h2>
<nav class="c-subpage-nav__nav c-subpage-nav__desktop" aria-labelledby="subpage-nav-title">
<ul class="c-subpage-nav__items" aria-label="Subpage Navigation links">
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced" aria-current="page">
Page One
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Two
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Three
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Four
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Five
</a>
</li>
</ul>
</nav>
<div class="c-subpage-nav__mobile">
<button class="c-subpage-nav__mobile-trigger o-btn o-accordion__button js-accordion-toggle f-text--cta" aria-expanded="false">
Subpages
<span class="c-subpage-nav__mobile-trigger-icon">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<nav class="c-subpage-nav__nav o-accordion__panel js-accordion-panel f-text--cta" aria-labelledby="subpage-nav-title">
<ul class="c-subpage-nav__items" aria-label="Subpages links">
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced" aria-current="page">
Page One
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Two
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Three
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Four
</a>
</li>
<li class="c-subpage-nav__item">
<a href="#" class="c-subpage-nav__link f-text--cta f-upper f-spaced">
Page Five
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="c-subpage-nav o-container" data-bkg-theme="base">
<h2 id="subpage-nav-title" class="u-sr-only">{{ title }}</h2>
<nav class="c-subpage-nav__nav c-subpage-nav__desktop" aria-labelledby="subpage-nav-title">
<ul class="c-subpage-nav__items" aria-label="{{ title }} links">
{% for item in items %}
<li class="c-subpage-nav__item">
<a href="{{ item.link }}" class="c-subpage-nav__link f-text--cta f-upper f-spaced"{% if item.isCurrent %} aria-current="page"{% endif %}>
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="c-subpage-nav__mobile">
<button class="c-subpage-nav__mobile-trigger o-btn o-accordion__button js-accordion-toggle f-text--cta" aria-expanded="false">
{{ mobileTitle }}
<span class="c-subpage-nav__mobile-trigger-icon">
{% include "03-icons/plus" %}
</span>
</button>
<nav class="c-subpage-nav__nav o-accordion__panel js-accordion-panel f-text--cta" aria-labelledby="subpage-nav-title">
<ul class="c-subpage-nav__items" aria-label="{{ mobileTitle }} links">
{% for item in items %}
<li class="c-subpage-nav__item">
<a href="{{ item.link }}" class="c-subpage-nav__link f-text--cta f-upper f-spaced"{% if item.isCurrent %} aria-current="page"{% endif %}>
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Subpage Navigation",
"mobileTitle": "Subpages",
"items": [
{
"title": "Page One",
"link": "#",
"isCurrent": true
},
{
"title": "Page Two",
"link": "#"
},
{
"title": "Page Three",
"link": "#"
},
{
"title": "Page Four",
"link": "#"
},
{
"title": "Page Five",
"link": "#"
}
]
}
.c-subpage-nav__items {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 0.1rem solid var(--ct-dark);
@include break($sm) {
position: relative;
top: auto;
left: auto;
border: 0;
border-bottom: 0.1rem solid var(--ct-dark);
}
}
.c-subpage-nav__item {
@include break($sm) {
display: inline-block;
margin-right: 4.5rem;
}
}
.c-subpage-nav__link {
display: block;
padding: 1.2rem 1.8rem;
@include break($sm) {
border-bottom: 0.6rem solid transparent;
}
&[aria-current=page] {
background-color: var(--ct-dark);
color: var(--ct-text-on-dark);
@include break($sm) {
background-color: transparent;
color: var(--ct-txt);
border-color: var(--ct-dark);
}
}
@include break($sm) {
padding: 1.2rem 0;
}
}
.c-subpage-nav__desktop {
display: none;
@include break($sm) {
display: block;
}
}
.c-subpage-nav__mobile {
position: relative;
z-index: 999;
@include break($sm) {
display: none;
}
.o-accordion__panel {
visibility: hidden;
opacity: 0;
transform: translate3d(0, 1.6rem, 0);
transition: all 0.24s ease-in-out;
display: block;
&.is-open {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
.c-subpage-nav__mobile-trigger {
position: relative;
width: 100%;
border-bottom: 0.2rem solid var(--ct-dark);
text-transform: none;
}
.c-subpage-nav__mobile-trigger-icon {
transition: all 0.24s ease-in-out;
margin-left: 0.8rem;
display: inline-block;
position: absolute;
top: 1.4rem;
right: 0;
.is-open & {
transform: rotate(45deg);
}
svg {
display: block;
}
}
No notes defined.