Primary Nav: Default

Ready

Notes
HTML
Assets

No notes defined.


        
        <nav class=" primaryNav">
    <bp-directional>
        <ul class="primaryNav__list">
            <li class="primaryNav__item">
                <bp-dropdown label-class="primaryNav__link" href="" label="Maine" id="a11y-maine">
                    <bp-directional>
                        <div class="container linkGroups">
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Seacoast</div>
                                <ul class="linkGroup__list -wide">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Bar Harbor</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Camden</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Castine</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Damariscotta</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Kennebunkport</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Old Orchard Beach</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Portland</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Rockland</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Stonington</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Parks</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Acadia</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Baxter</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Camden Hills</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Popham Beach</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Quoddy Head</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Reid</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Activities</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Agricultural Attractions</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Arts &amp; Culture</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Fishing</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Guide Services</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Hiking &amp; Climbing</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Hunting</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Lighthouses &amp; Sightseeing</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Spas, Health &amp; Wellness</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Wildlife Watching</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Winter Activities</a></li>
                                </ul>
                            </div>
                        </div>
                    </bp-directional>
                </bp-dropdown>
            </li>
            <li class="primaryNav__item">
                <bp-dropdown label-class="primaryNav__link" href="" label="New Hampshire" id="a11y-new-hampshire">
                    <bp-directional>
                        <div class="container linkGroups">
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Towns</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Manchester</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Portsmouth</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Sunapee</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Concord</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Conway</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Keene</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Laconia</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Berlin</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Parks</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Bear Brook</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Franconia Notch</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Hampton Beach</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Odiorne Point</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Pawtuckaway</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">White Mountains</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Activities</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Boating</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Canoeing &amp; Kayaking</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Christmas Tree Farms</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Covered Bridges</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Fishing</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Guide Services</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Hunting</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Skiing &amp; Riding</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Waterfalls</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">White Water Rafting</a></li>
                                </ul>
                            </div>
                        </div>
                    </bp-directional>
                </bp-dropdown>
            </li>
            <li class="primaryNav__item">
                <bp-dropdown class="-rightEdge" label-class="primaryNav__link" href="" label="Massachusetts" id="a11y-massachusetts">
                    <bp-directional>
                        <div class="container linkGroups">
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Cities</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Plymouth</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Springfield</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">Cape Cod &amp; Islands</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Chatham</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Falmouth</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Hyannis</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Oak Bluffs</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Orleans</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Sandwich</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Truro</a></li>
                                </ul>
                            </div>
                            <div class="linkGroup">
                                <div class="linkGroup__heading">In the City</div>
                                <ul class="linkGroup__list">
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Casinos</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Massachusetts Gardens</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Museums &amp; Galleries</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Night Life</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Performing Arts</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Scenic Drive Tours</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">Ski Areas</a></li>
                                    <li class="linkGroup__item"><a class="linkGroup__link" href="#">State Parks</a></li>
                                </ul>
                            </div>
                        </div>
                    </bp-directional>
                </bp-dropdown>
            </li>
        </ul>
    </bp-directional>
</nav>

File:

Content:


                                .primaryNav {
    display: none;

    &__list {
        @include no-bullets;
        display: flex;
    }

    &__item {
        margin-bottom: 0;
    }

    &__link {
        display: block;
        padding: 1.5rem $h-space;
        font-weight: bold;
    }

    @include at(lg) {
        display: block;
    }
}

URL: /components/raw/primary-nav/primary-nav.scss
Filesystem Path: resources/styles/organisms/primary-nav/primary-nav.scss
Size: 314 Bytes