No notes defined.
<nav class="primaryNav">
<div class="container">
<bp-directional>
<ul class="primaryNav__list">
<li class="primaryNav__item">
<bp-dropdown class="-fullWidth" label-class="primaryNav__link" href="" label="Maine" id="a11y-maine">
<bp-directional class="container">
<div class="linkGroups">
<div class="linkGroups__callout">
<picture>
<source type="image/webp" data-srcset="https://picsum.photos/256.webp 1024w, https://picsum.photos/360.webp 1440w, https://picsum.photos/480.webp 1920w" data-sizes="auto" />
<img src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="480" width="480"></svg>" alt="Placeholder Image" class="lazyload" data-srcset="https://picsum.photos/256 1024w, https://picsum.photos/360 1440w, https://picsum.photos/480 1920w" data-sizes="auto" />
</picture>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Seacoast</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Bar Harbor</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Camden</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Kennebunkport</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Old Orchard Beach</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Portland</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Rockland</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Parks</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Acadia</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Baxter</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Camden Hills</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Popham Beach</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Quoddy Head</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Reid</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Activities</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Agricultural Attractions</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Arts & Culture</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Camping</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Fishing</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Guide Services</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Hiking & Climbing</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
<li class="primaryNav__item">
<bp-dropdown class="-fullWidth" label-class="primaryNav__link" href="" label="New Hampshire" id="a11y-new-hampshire">
<bp-directional class="container">
<div class="linkGroups">
<div class="linkGroups__group">
<div class="linkGroups__heading">Towns</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Manchester</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Portsmouth</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Sunapee</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Concord</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Conway</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Parks</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Bear Brook</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Franconia Notch</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Hampton Beach</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Odiorne Point</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Pawtuckaway</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">White Mountains</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Activities</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Boating</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Camping</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Canoeing & Kayaking</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Christmas Tree Farms</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
<li class="primaryNav__item">
<bp-dropdown class="-fullWidth" label-class="primaryNav__link" href="" label="Massachusetts" id="a11y-massachusetts">
<bp-directional class="container">
<div class="linkGroups">
<div class="linkGroups__group">
<div class="linkGroups__heading">Cities</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Boston</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Cambridge</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Lowell</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Plymouth</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Salem</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Springfield</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Worcester</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Cape Cod & Islands</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Chatham</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Falmouth</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Hyannis</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Martha's Vineyard</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Nantucket</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Oak Bluffs</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Orleans</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Provincetown</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Sandwich</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Truro</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">In the City</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Camping</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Casinos</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Massachusetts Gardens</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Museums & Galleries</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Night Life</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Performing Arts</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Scenic Drive Tours</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Shopping</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Ski Areas</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">State Parks</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
</ul>
</bp-directional>
</div>
</nav>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
.primaryNav {
$b: &;
display: none;
background: config.$white;
&__list {
list-style: none;
padding-left: 0;
display: flex;
margin: 0;
}
&__item {
margin-bottom: 0;
--color: #{config.$primary};
--color-contrast: #{blackwhite(config.$primary)};
}
&__link {
display: block;
padding: 1.5rem config.$h-space;
font-weight: bold;
}
@include at(lg) {
display: block;
}
}