Anchored Nav

Anchored nav provides a persistent set of links for navigating to sections within the page.

Coded Components

Helper classes: Looking for a complete list of helper classes for these components?View helper classes

Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.

Horizontal Anchored Nav

<section> <nav class="dds__nav-anchored dds__tabs-container" data-toggle="dds__nav-anchored" data-target="#exampleResponsiveNav" aria-label="Example description of navigation"> <ul class="dds__tabs"> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link dds__active" data-target="#section1" aria-controls="section1" aria-selected="true" role="tab"> Section 1 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" tabindex="-1" data-target="#section2" aria-controls="section2" aria-selected="false" role="tab"> Section 2 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" tabindex="-1" data-target="#section3" aria-controls="section3" aria-selected="false" role="tab"> Section 3 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" tabindex="-1" data-target="#section4" aria-controls="section4" aria-selected="false" role="tab"> Section 4 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__flex-tab" role="none"> <button class="dds__tab-link" tabindex="-1" data-target="#section5" aria-controls="section5" aria-selected="true" role="tab"> Section 5 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </nav> <div class="dds__nav-content"> <div id="section1" class="dds__pt-5" role="tabpanel" aria-labelledby="section1"> <h2>Section 1</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="section2" class="dds__pt-5" role="tabpanel" aria-labelledby="section2"> <h2>Section 2</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation">Email label</label> <input type="email" class="dds__form-control" maxlength="256" name="email" id="emailInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="emailInput-validationFeedback"> Please enter your email. </div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation">First name</label> <input type="text" class="dds__form-control" id="firstnameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback"> Please enter your first name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation">Last name</label> <input type="text" class="dds__form-control" id="lastnameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback"> Please enter your last name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation">Username</label> <input type="text" class="dds__form-control" id="usernameInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback"> Please choose a username. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation">City</label> <input type="text" class="dds__form-control" id="cityInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="cityInput-validationFeedback"> Please provide a valid city. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation">State</label> <input type="text" placeholder="texas" class="dds__form-control" id="stateInput-validation" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="stateInput-validationFeedback"> Please provide a valid state. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation">Zip</label> <input id="zipcodeInput-validation" type="text" placeholder="#####" pattern="[1-9]{1}[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="XXXXX" required pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="zipcodeInput-validationFeedback"> Please provide a valid zip. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation">Phone</label> <input id="phoneInput-validation" type="text" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="(XXX) XXX-XXXX" required/> <div class="dds__invalid-feedback" id="phoneInput-validationFeedback"> Please provide a valid phone. </div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="section3" class="dds__pt-5" role="tabpanel" aria-labelledby="section3"> <h2>Section 3</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="section4" class="dds__pt-5" role="tabpanel" aria-labelledby="section4"> <h2>Section 4</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation1">Email label</label> <input type="email" class="dds__form-control" maxlength="256" name="email" id="emailInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="emailInput-validationFeedback1"> Please enter your email. </div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation1">First name</label> <input type="text" class="dds__form-control" id="firstnameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback1"> Please enter your first name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation1">Last name</label> <input type="text" class="dds__form-control" id="lastnameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback1"> Please enter your last name. </div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation1">Username</label> <input type="text" class="dds__form-control" id="usernameInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback1"> Please choose a username. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation1">City</label> <input type="text" class="dds__form-control" id="cityInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="cityInput-validationFeedback1"> Please provide a valid city. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation1">State</label> <input type="text" placeholder="texas" class="dds__form-control" id="stateInput-validation1" required aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="stateInput-validationFeedback1"> Please provide a valid state. </div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation1">Zip</label> <input id="zipcodeInput-validation1" type="text" placeholder="#####" pattern="[1-9]{1}[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="XXXXX" required pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby=""> <div class="dds__invalid-feedback" id="zipcodeInput-validationFeedback1"> Please provide a valid zip. </div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation1">Phone</label> <input id="phoneInput-validation1" type="text" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="(XXX) XXX-XXXX" required/> <div class="dds__invalid-feedback" id="phoneInput-validationFeedback1"> Please provide a valid phone. </div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="section5" class="dds__pt-5" role="tabpanel" aria-labelledby="section5"> <h2>Section 5</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> <!-- Optional modal responsive implementation. The div below along with data-target set on the above nav element with the id below will create an off canvas modal version of the tab elements. If reponsive is not wanted then the below div and the data-target on the above nav element can be removed. The below div class=dds__modal-body is intentionally and should be left blank. The content in the above div class=dds__nav-content wil be used programmatically inside the div class=dds__modal-body.
--> <div id="exampleResponsiveNav" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"> <i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span> </button> </div> </div> </div> <div class="dds__modal-body"></div> </div> </div> <hr style="color: red; z-index: 5;">
</section>

Vertical Anchored Nav

<section> <div class="dds__mb-3 dds__nav-anchored-vertical-container"> <nav class="dds__nav-anchored-vertical dds__tabs-container" data-toggle="dds__nav-anchored-vertical" data-target="#exampleResponsiveVerticalNav"> <ul class="dds__nav-anchored-vertical-list"> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link dds__active" data-target="#verticalSection1" aria-controls="verticalSection1" aria-selected="true" role="tab"> Section 1 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection2" aria-controls="verticalSection2" aria-selected="false" role="tab"> Section 2 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection3" aria-controls="verticalSection3" aria-selected="false" role="tab"> Section 3 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection4" aria-controls="verticalSection4" aria-selected="false" role="tab"> Section 4 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> <li class="dds__nav-anchored-vertical-item" role="none"> <button class="dds__nav-anchored-vertical-link" tabindex="-1" data-target="#verticalSection5" aria-controls="verticalSection5" aria-selected="true" role="tab"> Section 5 <i class="dds__icons dds__chevron-right dds__tab-icon" aria-hidden="true"></i> </button> </li> </ul> </nav> <div class="dds__nav-anchored-vertical-content"> <div id="verticalSection1" role="tabpanel" aria-label="verticalSection1"> <h2>Section 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> <div id="verticalSection2" class="dds__pt-5" role="tabpanel" aria-label="verticalSection2"> <h2>Section 2</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation-vnav">Email label</label> <input type="email" id="emailInput-validation-vnav" class="dds__form-control" aria-describedby="" maxlength="256" name="email" required aria-invalid="false" /> <div class="dds__invalid-feedback" id="emailInput-validationFeedback-vnav">Please enter your email.</div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation-vnav">First name</label> <input type="text" id="firstnameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback-vnav">Please enter your first name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation-vnav">Last name</label> <input type="text" id="lastnameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback-vnav">Please enter your last name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation-vnav">Username</label> <input type="text" id="usernameInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback-vnav">Please choose a username.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation-vnav">City</label> <input type="text" id="cityInput-validation-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="cityInput-validationFeedback-vnav">Please provide a valid city.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation-vnav">State</label> <input type="text" id="stateInput-validation-vnav" class="dds__form-control" placeholder="texas" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="stateInput-validationFeedback-vnav">Please provide a valid state.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation-vnav">Zip</label> <input type="text" id="zipcodeInput-validation-vnav" required placeholder="#####" pattern="[1-9]{1}[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="XXXXX" pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="zipcodeInput-validationFeedback">Please provide a valid zip.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation-vnav">Phone</label> <input id="phoneInput-validation-vnav" type="text" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" class="dds__form-control dds__input-masked" data-charset="(XXX) XXX-XXXX" required /> <div class="dds__invalid-feedback" id="phoneInput-validationFeedback-vnav">Please provide a valid phone.</div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="verticalSection3" class="dds__pt-5" role="tabpanel" aria-label="verticalSection3"> <h2>Section 3</h2> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p> Curabitur non volutpat massa, ut varius odio. Aenean felis orci, viverra nec auctor ut, molestie et lorem. Fusce laoreet urna augue, dictum maximus magna porttitor quis. In eget risus libero. Quisque sem ligula, dictum ac viverra bibendum, egestas sed erat. Mauris tempor erat a mauris tempus commodo. Quisque volutpat dignissim tortor, non fringilla libero fringilla sed. Aliquam ornare vehicula ullamcorper. Suspendisse urna metus, bibendum eget dictum quis, ullamcorper ac leo. Fusce mattis turpis ac quam fermentum consectetur. Etiam ac sapien non enim fringilla mattis non sed magna. Vestibulum non metus at dolor posuere tempor. In eu nisl blandit, laoreet augue id, posuere lectus. Pellentesque eros metus, faucibus id accumsan a, laoreet eget nibh. Sed a commodo orci. </p> </div> <div id="verticalSection4" class="dds__pt-5" role="tabpanel" aria-label="verticalSection4"> <h2>Section 4</h2> <form data-toggle="dds__form-validation" novalidate> <div class="dds__form-group"> <label for="emailInput-validation1-vnav">Email label</label> <input type="email" id="emailInput-validation1-vnav" class="dds__form-control" maxlength="256" name="email" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="emailInput-validationFeedback1">Please enter your email.</div> </div> <div class="dds__form-row"> <div class="dds__col-md-4 dds__mb-3"> <label for="firstnameInput-validation1-vnav">First name</label> <input type="text" id="firstnameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="firstnameInput-validationFeedback1">Please enter your first name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="lastnameInput-validation1-vnav">Last name</label> <input type="text" id="lastnameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="lastnameInput-validationFeedback1">Please enter your last name.</div> </div> <div class="dds__col-md-4 dds__mb-3"> <label for="usernameInput-validation1-vnav">Username</label> <input type="text" id="usernameInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="usernameInput-validationFeedback1-vnav">Please choose a username.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-6 dds__mb-3"> <label for="cityInput-validation1">City</label> <input type="text" id="cityInput-validation1-vnav" class="dds__form-control" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="cityInput-validationFeedback1-vnav">Please provide a valid city.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="stateInput-validation1-vnav">State</label> <input type="text" id="stateInput-validation1-vnav" class="dds__form-control" placeholder="texas" required aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="stateInput-validationFeedback1-vnav">Please provide a valid state.</div> </div> <div class="dds__col-md-3 dds__mb-3"> <label for="zipcodeInput-validation1-vnav">Zip</label> <input id="zipcodeInput-validation1-vnav" class="dds__form-control dds__input-masked" type="text" placeholder="#####" pattern="[1-9]{1}[0-9]{4}" data-charset="XXXXX" required pattern="^[0-9]{5}(?:-9]{4})?$" aria-invalid="false" aria-describedby="" /> <div class="dds__invalid-feedback" id="zipcodeInput-validationFeedback1-vnav">Please provide a valid zip.</div> </div> </div> <div class="dds__form-row"> <div class="dds__col-md-3 dds__mb-3"> <label for="phoneInput-validation1-vnav">Phone</label> <input type="text" id="phoneInput-validation1-vnav" class="dds__form-control dds__input-masked" placeholder="(___) ___-____" set-cursor="1" pattern="\([1-9]{1}[0-9]{2}\) [0-9]{3}-[0-9]{4}" data-charset="(XXX) XXX-XXXX" required /> <div class="dds__invalid-feedback" id="phoneInput-validationFeedback1-vnav">Please provide a valid phone.</div> </div> </div> <button class="dds__btn dds__btn-primary" type="submit">Submit form</button> </form> </div> <div id="verticalSection5" class="dds__pt-5" role="tabpanel" aria-label="verticalSection5"> <h2>Section 5</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum enim tempor nulla lacinia mollis. In commodo elementum mi non auctor. Duis malesuada turpis et urna imperdiet rhoncus. Aenean hendrerit nec diam a porttitor. Nam eleifend sollicitudin ipsum, quis pretium dolor consectetur eu. Aenean nec malesuada leo, a sagittis lorem. Ut vitae ligula sed ex iaculis tincidunt. Pellentesque iaculis sollicitudin dolor, non commodo sem vehicula vitae. Maecenas tristique eget dolor vel placerat. Aenean rutrum, velit eu dictum molestie, velit ante tincidunt quam, at dapibus dui leo vestibulum metus. Phasellus tincidunt velit eros, sed luctus nisl bibendum nec. Donec porttitor pellentesque ipsum, eu dictum ante vestibulum varius. Proin nec iaculis enim, non dapibus enim. Sed neque magna, commodo ut risus convallis, vehicula faucibus dui. Donec vestibulum metus vitae erat aliquam, vel faucibus odio laoreet. Pellentesque venenatis sapien leo. </p> <p> Curabitur non volutpat massa, ut varius odio. Aenean felis orci, viverra nec auctor ut, molestie et lorem. Fusce laoreet urna augue, dictum maximus magna porttitor quis. In eget risus libero. Quisque sem ligula, dictum ac viverra bibendum, egestas sed erat. Mauris tempor erat a mauris tempus commodo. Quisque volutpat dignissim tortor, non fringilla libero fringilla sed. Aliquam ornare vehicula ullamcorper. Suspendisse urna metus, bibendum eget dictum quis, ullamcorper ac leo. Fusce mattis turpis ac quam fermentum consectetur. Etiam ac sapien non enim fringilla mattis non sed magna. Vestibulum non metus at dolor posuere tempor. In eu nisl blandit, laoreet augue id, posuere lectus. Pellentesque eros metus, faucibus id accumsan a, laoreet eget nibh. Sed a commodo orci. </p> <p> Integer vitae tellus consectetur tellus tempus tincidunt. Suspendisse potenti. Vivamus vehicula hendrerit ex sit amet ultrices. In et magna consequat, rutrum ligula at, tincidunt orci. Curabitur sagittis ex massa. Suspendisse scelerisque consequat mauris sit amet ornare. Aliquam facilisis metus felis, et lobortis erat egestas nec. Donec tincidunt sagittis ullamcorper. Quisque a velit eget magna lacinia dignissim. Aliquam sed fermentum leo. Nam luctus et ipsum non suscipit. Nunc tristique ligula nisi, sed accumsan magna imperdiet id. Praesent fringilla ligula viverra nisl suscipit, in tincidunt arcu semper. Donec eu varius arcu. Suspendisse posuere ullamcorper tellus, et scelerisque tortor volutpat et. Etiam non arcu nec felis bibendum tristique vitae sit amet est. </p> <p> Vestibulum in semper tellus. Donec ornare purus ac finibus posuere. Duis finibus libero vel lorem laoreet molestie. Quisque sapien libero, egestas et leo at, vehicula finibus lectus. Vivamus efficitur dignissim libero et vehicula. Integer at dui a dui rhoncus pulvinar eu quis tortor. In gravida maximus dolor, nec dictum erat finibus id. Quisque vitae pretium mi. In non dignissim est. Nam at lorem eleifend, fermentum elit non, ornare erat. Fusce sed sapien eu diam fringilla luctus et vitae elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Ut id est non urna rhoncus mollis eu in mauris. Suspendisse mollis fermentum enim, sed mollis nisl dignissim eu. Cras fringilla mi quis tincidunt venenatis. In at luctus leo. Mauris at lacinia ligula, in mollis lacus. Vivamus mi nisi, vestibulum et purus eget, tristique pretium eros. Fusce quis vehicula nunc. Nunc non ex non nisl maximus maximus nec et odio. Pellentesque eu cursus ex. </p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> <p>The quick brown fox jumped over the lazy dog.</p> </div> </div> </div> <!-- Optional modal responsive implementation. The div below along with data-target set on the above nav element with the id below will create an off canvas modal version of the tab elements. If reponsive is not wanted then the below div and the data-target on the above nav element can be removed. The below div class=dds__modal-body is intentionally and should be left blank. The content in the above div class=dds__nav-content wil be used programmatically inside the div class=dds__modal-body.
--> <div id="exampleResponsiveVerticalNav" tabindex="-1" class="dds__modal dds__modal-offcanvas" role="dialog"> <div class="dds__modal-content"> <div class="dds__container-fluid dds__p-1"> <div class="dds__row"> <div class="dds__col-6"> <button class="dds__btn dds__btn-link" data-dismiss="dds__modal" aria-label="Back"><i class="dds__icons dds__chevron-left" aria-hidden="true"></i> <span>Back</span></button> </div> </div> </div> <div class="dds__modal-body"></div> </div> </div> <hr style="color: red; z-index: 5;" />
</section>

No items found.

No items found.

Usage

All Anchored Nav

  • The links within an anchored nav not only navigate to the principal sections on the page, but also communicate to users what sections exist, which has proven to improve page scroll.
  • Alternatively, one or more of the links (such as Deals) within an anchored nav could navigate to a new page.
  • The current link within the anchored navbar gains focus when selected, or when users reach the corresponding page section through scrolling.
  • On smaller breakpoints, an anchored nav is either hidden, or it becomes a list of links that open corresponding off canvases (see Tabs on smaller breakpoints). This decision is made by the content strategist for the page.
  • Avoid using anchored nav with tab components on the same page because they look too similar and may provide conflicting off canvas functionality at smaller breakpoints.

Horizontal Anchored Nav

  • The links are arranged in a horizontal bar layout.
  • Its initial position is typically beneath the fold or near the bottom of the visible content
  • Anchors to the top of the viewport when users attempt to scroll past it.

Vertical Anchored Nav

  • The links are arranged in a vertical bar layout.
  • Typically anchored to the left of the page content.
  • Remains on-screen while users scroll.

Do's and Don'ts

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Accessibility

The A11Y Style Guide has excellent examples of basic navigation.

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Please follow the best practices for menu bars from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for links from WAI-ARIA 1.1.

You may refer to these examples of links from WAI-ARIA practices 1.1.

You may also refer to these tutorials for page structure and tutorials for menus from Web Accessibility Tutorials.