src/app/legacy/containers/Navigation/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navigation Container should correctly render amp navigation 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
@media (max-width: 37.4375rem) {
.emotion-0.si-nav-open {
background-color: #222222;
}
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-68::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-4:hover,
.emotion-4:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-4:hover::after,
.emotion-4:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-4 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-4 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-4 svg {
vertical-align: middle;
}
.emotion-6 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-6 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-11 {
background-color: #FFFFFF;
clear: both;
}
@media (min-width: 37.5rem) {
.emotion-11 {
display: none;
visibility: hidden;
}
}
.emotion-13 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-17:hover,
.emotion-17:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
.emotion-19 {
border-left: 0.25rem solid #B80000;
padding-left: 0.5rem;
}
@media (max-width: 37.4375rem) {
.emotion-63 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-63::-webkit-scrollbar {
display: none;
}
.emotion-63:focus-visible {
outline: none;
}
.emotion-63:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-63:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-63:after {
width: 6rem;
}
}
}
@media (max-width: 37.4375rem) {
.emotion-63.si-nav-scrollable-hidden {
display: none;
visibility: hidden;
}
}
.emotion-65 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-65 {
overflow: hidden;
}
}
.emotion-67 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-67:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-67::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-69 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-69 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-69 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-69 {
padding: 0.75rem 0.5rem;
}
}
.emotion-69:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
border-bottom: 0.3125rem solid #B80000;
}
.emotion-69:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-69:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-71::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-76 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-76 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-76 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-76 {
padding: 0.75rem 0.5rem;
}
}
.emotion-76:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-76:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-76:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
id="si-nav"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<amp-state
id="menuState"
>
<script
type="application/json"
>
{"expanded":false}
</script>
</amp-state>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-4 emotion-5"
data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
dir="ltr"
on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
si-nav-dropdown-menu.toggleVisibility,
si-nav-scrollable.toggleClass(class=si-nav-scrollable-hidden),
si-nav.toggleClass(class=si-nav-open)
"
type="button"
>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="menuState.expanded"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="!menuState.expanded"
focusable="false"
height="2.75rem"
hidden=""
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"
fill-rule="evenodd"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="dropdown-nav"
hidden=""
id="si-nav-dropdown-menu"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-17 emotion-18"
href="/news"
>
<span
class="emotion-19 emotion-20"
dir="ltr"
id="dropdownNavigation-home"
role="text"
>
<span
class="emotion-10"
>
Current page,
</span>
Home
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-17 emotion-18"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-17 emotion-18"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-17 emotion-18"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-17 emotion-18"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-17 emotion-18"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-17 emotion-18"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-17 emotion-18"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-17 emotion-18"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-17 emotion-18"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-17 emotion-18"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
<div
class="emotion-62 emotion-63 emotion-64"
data-e2e="scrollable-nav"
dir="ltr"
id="si-nav-scrollable"
>
<ul
class="emotion-65 emotion-66"
role="list"
>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
aria-labelledby="NavigationLinks-Home"
class="focusIndicatorRemove emotion-69 emotion-70"
href="/news"
>
<span
class="emotion-71 emotion-72"
id="NavigationLinks-Home"
role="text"
>
<span
class="emotion-10"
>
Current page,
</span>
Home
</span>
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-67 emotion-68"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-76 emotion-70"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
exports[`Navigation Container should correctly render amp navigation on non-home navigation page 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
@media (max-width: 37.4375rem) {
.emotion-0.si-nav-open {
background-color: #222222;
}
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-65::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-4:hover,
.emotion-4:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-4:hover::after,
.emotion-4:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-4 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-4 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-4 svg {
vertical-align: middle;
}
.emotion-6 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-6 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-11 {
background-color: #FFFFFF;
clear: both;
}
@media (min-width: 37.5rem) {
.emotion-11 {
display: none;
visibility: hidden;
}
}
.emotion-13 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-17:hover,
.emotion-17:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
@media (max-width: 37.4375rem) {
.emotion-60 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-60::-webkit-scrollbar {
display: none;
}
.emotion-60:focus-visible {
outline: none;
}
.emotion-60:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-60:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-60:after {
width: 6rem;
}
}
}
@media (max-width: 37.4375rem) {
.emotion-60.si-nav-scrollable-hidden {
display: none;
visibility: hidden;
}
}
.emotion-62 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-62 {
overflow: hidden;
}
}
.emotion-64 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-64:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-64::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-66 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-66 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-66 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-66 {
padding: 0.75rem 0.5rem;
}
}
.emotion-66:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-66:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-66:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
id="si-nav"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<amp-state
id="menuState"
>
<script
type="application/json"
>
{"expanded":false}
</script>
</amp-state>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-4 emotion-5"
data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
dir="ltr"
on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
si-nav-dropdown-menu.toggleVisibility,
si-nav-scrollable.toggleClass(class=si-nav-scrollable-hidden),
si-nav.toggleClass(class=si-nav-open)
"
type="button"
>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="menuState.expanded"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="!menuState.expanded"
focusable="false"
height="2.75rem"
hidden=""
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"
fill-rule="evenodd"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="dropdown-nav"
hidden=""
id="si-nav-dropdown-menu"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-17 emotion-18"
href="/news"
>
<span
id="dropdownNavigation-home"
>
Home
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-17 emotion-18"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-17 emotion-18"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-17 emotion-18"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-17 emotion-18"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-17 emotion-18"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-17 emotion-18"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-17 emotion-18"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-17 emotion-18"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-17 emotion-18"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-17 emotion-18"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
<div
class="emotion-59 emotion-60 emotion-61"
data-e2e="scrollable-nav"
dir="ltr"
id="si-nav-scrollable"
>
<ul
class="emotion-62 emotion-63"
role="list"
>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news"
>
Home
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
exports[`Navigation Container should correctly render amp navigation on non-navigation page 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
@media (max-width: 37.4375rem) {
.emotion-0.si-nav-open {
background-color: #222222;
}
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-65::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-4:hover,
.emotion-4:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-4:hover::after,
.emotion-4:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-4 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-4 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-4 svg {
vertical-align: middle;
}
.emotion-6 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-6 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-11 {
background-color: #FFFFFF;
clear: both;
}
@media (min-width: 37.5rem) {
.emotion-11 {
display: none;
visibility: hidden;
}
}
.emotion-13 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-15:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-17:hover,
.emotion-17:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
@media (max-width: 37.4375rem) {
.emotion-60 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-60::-webkit-scrollbar {
display: none;
}
.emotion-60:focus-visible {
outline: none;
}
.emotion-60:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-60:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-60:after {
width: 6rem;
}
}
}
@media (max-width: 37.4375rem) {
.emotion-60.si-nav-scrollable-hidden {
display: none;
visibility: hidden;
}
}
.emotion-62 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-62 {
overflow: hidden;
}
}
.emotion-64 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-64:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-64::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-66 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-66 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-66 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-66 {
padding: 0.75rem 0.5rem;
}
}
.emotion-66:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-66:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-66:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
id="si-nav"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<amp-state
id="menuState"
>
<script
type="application/json"
>
{"expanded":false}
</script>
</amp-state>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-4 emotion-5"
data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
dir="ltr"
on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
si-nav-dropdown-menu.toggleVisibility,
si-nav-scrollable.toggleClass(class=si-nav-scrollable-hidden),
si-nav.toggleClass(class=si-nav-open)
"
type="button"
>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="menuState.expanded"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<svg
aria-hidden="true"
class="emotion-6 emotion-7"
data-amp-bind-hidden="!menuState.expanded"
focusable="false"
height="2.75rem"
hidden=""
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"
fill-rule="evenodd"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="dropdown-nav"
hidden=""
id="si-nav-dropdown-menu"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-17 emotion-18"
href="/news"
>
<span
id="dropdownNavigation-home"
>
Home
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-17 emotion-18"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-17 emotion-18"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-17 emotion-18"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-17 emotion-18"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-17 emotion-18"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-17 emotion-18"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-17 emotion-18"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-17 emotion-18"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-17 emotion-18"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-17 emotion-18"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
<div
class="emotion-59 emotion-60 emotion-61"
data-e2e="scrollable-nav"
dir="ltr"
id="si-nav-scrollable"
>
<ul
class="emotion-62 emotion-63"
role="list"
>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news"
>
Home
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-64 emotion-65"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-66 emotion-67"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
exports[`Navigation Container should correctly render canonical navigation 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-16::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-6:hover,
.emotion-6:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-6:hover::after,
.emotion-6:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-6 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-6 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-6 svg {
vertical-align: middle;
}
.emotion-8 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-8 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
@media (max-width: 37.4375rem) {
.emotion-11 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-11::-webkit-scrollbar {
display: none;
}
.emotion-11:focus-visible {
outline: none;
}
.emotion-11:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-11:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-11:after {
width: 6rem;
}
}
}
.emotion-13 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-13 {
overflow: hidden;
}
}
.emotion-15 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-15:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-17 {
padding: 0.75rem 0.5rem;
}
}
.emotion-17:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
border-bottom: 0.3125rem solid #B80000;
}
.emotion-17:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-17:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-19::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-24 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-24 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-24 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-24 {
padding: 0.75rem 0.5rem;
}
}
.emotion-24:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-24:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-24:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-62 {
background-color: #FFFFFF;
clear: both;
overflow: hidden;
height: 0;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
visibility: hidden;
}
@media (min-width: 37.5rem) {
.emotion-62 {
display: none;
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.emotion-62 {
-webkit-transition: none;
transition: none;
}
}
.emotion-64 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-66 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-66:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-68 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-68 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-68 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-68:hover,
.emotion-68:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
.emotion-70 {
border-left: 0.25rem solid #B80000;
padding-left: 0.5rem;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-6 emotion-7"
dir="ltr"
type="button"
>
<svg
aria-hidden="true"
class="emotion-8 emotion-9"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="scrollable-nav"
dir="ltr"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
aria-labelledby="NavigationLinks-Home"
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news"
>
<span
class="emotion-19 emotion-20"
id="NavigationLinks-Home"
role="text"
>
<span
class="emotion-10"
>
Current page,
</span>
Home
</span>
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-24 emotion-18"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
<div
class="emotion-62 emotion-63"
data-e2e="dropdown-nav"
height="0"
>
<ul
class="emotion-64 emotion-65"
role="list"
>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-68 emotion-69"
href="/news"
>
<span
class="emotion-70 emotion-71"
dir="ltr"
id="dropdownNavigation-home"
role="text"
>
<span
class="emotion-10"
>
Current page,
</span>
Home
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-68 emotion-69"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-68 emotion-69"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-68 emotion-69"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-68 emotion-69"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-68 emotion-69"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-68 emotion-69"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-68 emotion-69"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-68 emotion-69"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-68 emotion-69"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-66 emotion-67"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-68 emotion-69"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
exports[`Navigation Container should correctly render canonical navigation on non-home navigation page 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-16::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-6:hover,
.emotion-6:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-6:hover::after,
.emotion-6:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-6 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-6 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-6 svg {
vertical-align: middle;
}
.emotion-8 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-8 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
@media (max-width: 37.4375rem) {
.emotion-11 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-11::-webkit-scrollbar {
display: none;
}
.emotion-11:focus-visible {
outline: none;
}
.emotion-11:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-11:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-11:after {
width: 6rem;
}
}
}
.emotion-13 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-13 {
overflow: hidden;
}
}
.emotion-15 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-15:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-17 {
padding: 0.75rem 0.5rem;
}
}
.emotion-17:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-17:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-17:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-59 {
background-color: #FFFFFF;
clear: both;
overflow: hidden;
height: 0;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
visibility: hidden;
}
@media (min-width: 37.5rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.emotion-59 {
-webkit-transition: none;
transition: none;
}
}
.emotion-61 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-63 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-63:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-65 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-65 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-65 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-65:hover,
.emotion-65:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-6 emotion-7"
dir="ltr"
type="button"
>
<svg
aria-hidden="true"
class="emotion-8 emotion-9"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="scrollable-nav"
dir="ltr"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news"
>
Home
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
<div
class="emotion-59 emotion-60"
data-e2e="dropdown-nav"
height="0"
>
<ul
class="emotion-61 emotion-62"
role="list"
>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-65 emotion-66"
href="/news"
>
<span
id="dropdownNavigation-home"
>
Home
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-65 emotion-66"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-65 emotion-66"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-65 emotion-66"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-65 emotion-66"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-65 emotion-66"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-65 emotion-66"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-65 emotion-66"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-65 emotion-66"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-65 emotion-66"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-65 emotion-66"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
exports[`Navigation Container should correctly render canonical navigation on non-navigation page 1`] = `
.emotion-0 {
position: relative;
background-color: #FFFFFF;
}
.emotion-0::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-0 .emotion-16::after {
left: 0;
}
.emotion-2 {
position: relative;
max-width: 63.4rem;
margin: 0;
background-color: #FFFFFF;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin: 0 0.8rem;
}
}
@media (min-width: 66rem) {
.emotion-2 {
margin: 0 auto;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
position: relative;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
float: left;
height: 2.75rem;
width: 2.75rem;
}
.emotion-6:hover,
.emotion-6:focus {
cursor: pointer;
box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}
.emotion-6:hover::after,
.emotion-6:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0.25rem solid #000000;
}
@media (min-width: 37.5rem) {
.emotion-6 {
display: none;
visibility: hidden;
}
}
@media (min-width: 20rem) {
.emotion-6 {
height: 2.75rem;
width: 2.75rem;
}
}
.emotion-6 svg {
vertical-align: middle;
}
.emotion-8 {
color: #000000;
fill: currentColor;
}
@media screen and (forced-colors: active) {
.emotion-8 {
fill: linkText;
}
}
.emotion-10 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
@media (max-width: 37.4375rem) {
.emotion-11 {
white-space: nowrap;
overflow-x: scroll;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.emotion-11::-webkit-scrollbar {
display: none;
}
.emotion-11:focus-visible {
outline: none;
}
.emotion-11:focus-visible::after {
outline: 0.1875rem solid #000000;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.emotion-11:after {
content: ' ';
height: 100%;
width: 3rem;
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
@media (min-width: 25rem) {
.emotion-11:after {
width: 6rem;
}
}
}
.emotion-13 {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
@media (min-width: 37.5rem) {
.emotion-13 {
overflow: hidden;
}
}
.emotion-15 {
display: inline-block;
position: relative;
z-index: 2;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
@media (max-width: 37.4375rem) {
.emotion-15:last-child {
margin-right: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15::after {
content: '';
position: absolute;
bottom: -1px;
width: 80rem;
border-bottom: 0.0625rem solid #E6E8EA;
z-index: -1;
}
}
.emotion-17 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
display: inline-block;
padding: 0.75rem 0.25rem;
outline: none;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-17 {
padding: 0.75rem 0.5rem;
}
}
.emotion-17:hover::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
}
.emotion-17:focus::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-17:focus-visible::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 0.25rem solid #B80000;
top: 0;
border: 0.1875rem solid #000000;
}
.emotion-59 {
background-color: #FFFFFF;
clear: both;
overflow: hidden;
height: 0;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
visibility: hidden;
}
@media (min-width: 37.5rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.emotion-59 {
-webkit-transition: none;
transition: none;
}
}
.emotion-61 {
list-style-type: none;
margin: 0;
padding: 0 0.5rem;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-63 {
padding: 0.75rem 0;
border-bottom: 0.0625rem solid #E6E8EA;
}
.emotion-63:last-child {
padding-bottom: 0.25rem;
border: 0;
}
.emotion-65 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
padding: 0.75rem 0;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-65 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-65 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-65:hover,
.emotion-65:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: #B80000;
}
<div>
<nav
class="emotion-0 emotion-1"
dir="ltr"
role="navigation"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
>
<button
aria-expanded="false"
class="focusIndicatorRemove emotion-6 emotion-7"
dir="ltr"
type="button"
>
<svg
aria-hidden="true"
class="emotion-8 emotion-9"
focusable="false"
height="2.75rem"
viewBox="0 0 44 44"
width="2.75rem"
>
<path
d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
/>
</svg>
<span
class="emotion-10"
>
Sections
</span>
</button>
<div
class="emotion-11 emotion-12"
data-e2e="scrollable-nav"
dir="ltr"
>
<ul
class="emotion-13 emotion-14"
role="list"
>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news"
>
Home
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/uk"
>
UK
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/world"
>
World
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/business"
>
Business
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/politics"
>
Politics
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/technology"
>
Tech
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/science_and_environment"
>
Science
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/health"
>
Health
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/education"
>
Family & Education
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/entertainment_and_arts"
>
Entertainment & Arts
</a>
</li>
<li
class="emotion-15 emotion-16"
dir="ltr"
role="listitem"
>
<a
class="focusIndicatorRemove emotion-17 emotion-18"
href="/news/stories"
>
Stories
</a>
</li>
</ul>
</div>
</div>
<div
class="emotion-59 emotion-60"
data-e2e="dropdown-nav"
height="0"
>
<ul
class="emotion-61 emotion-62"
role="list"
>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-home"
class="emotion-65 emotion-66"
href="/news"
>
<span
id="dropdownNavigation-home"
>
Home
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-uk"
class="emotion-65 emotion-66"
href="/news/uk"
>
<span
id="dropdownNavigation-uk"
>
UK
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-world"
class="emotion-65 emotion-66"
href="/news/world"
>
<span
id="dropdownNavigation-world"
>
World
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-business"
class="emotion-65 emotion-66"
href="/news/business"
>
<span
id="dropdownNavigation-business"
>
Business
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-politics"
class="emotion-65 emotion-66"
href="/news/politics"
>
<span
id="dropdownNavigation-politics"
>
Politics
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-tech"
class="emotion-65 emotion-66"
href="/news/technology"
>
<span
id="dropdownNavigation-tech"
>
Tech
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-science"
class="emotion-65 emotion-66"
href="/news/science_and_environment"
>
<span
id="dropdownNavigation-science"
>
Science
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-health"
class="emotion-65 emotion-66"
href="/news/health"
>
<span
id="dropdownNavigation-health"
>
Health
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-family-&-education"
class="emotion-65 emotion-66"
href="/news/education"
>
<span
id="dropdownNavigation-family-&-education"
>
Family & Education
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-entertainment-&-arts"
class="emotion-65 emotion-66"
href="/news/entertainment_and_arts"
>
<span
id="dropdownNavigation-entertainment-&-arts"
>
Entertainment & Arts
</span>
</a>
</li>
<li
class="emotion-63 emotion-64"
role="listitem"
>
<a
aria-labelledby="dropdownNavigation-stories"
class="emotion-65 emotion-66"
href="/news/stories"
>
<span
id="dropdownNavigation-stories"
>
Stories
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;