Sticky horizontal nav

The sticky horizontal nav pattern can be used to help users stay orientated on a long web page that requires a lot of scrolling.

It appears within the flow of content, below the normal navigation bar and affixes to the top of the browser window as you scroll down past it. The sticky horizontal nav also highlights the current section as you scroll down the page. On smaller width browser windows the navigation changes to a dropdown list.

Rules for sticky horizontal nav

Must only be used on long pages where there is a need to provide a quick means of navigating between sections.
Must not immediately follow the navigation bar so that it is clear it is secondary navigation only related to the current page.
Must not contain any dropdown menus.
Must only contain links to in-page content.
Must not display on more than one row.
Only one sticky horizontal nav can be used on a page.
Sticky horizontal nav links should link to unique, clearly labelled sections.
The linked sections should appear vertically and match the order they appear in the sticky horizontal nav.
Linked sections should be wrapped in an additional block element with the section__anchor--sticky class. This adds top padding and the equivalent negative top margin, to offset the height of the sticky navigation bar and provide improved browser support. This class should not be applied to any element that appears before the sticky nav itself.
Including <div id="sticky-nav__active-section"></div> within the sticky-nav__toggle element will highlight the current section when the navigation switches to a dropdown list on smaller width browser windows.

Other things to consider

If the bottom of the page is reached then selection automatically jumps to the last navigation item.
Linking to a section that has a top margin will anchor to the top of that section's first child element, with the margin being ignored.
Linking to a section that has a top padding will anchor to the top of that section, above the padded area. This can be used to include more visual 'breathing space', offers improved browser support and is the preferred method that should be used.
The fixed positioning of the sticky navigation bar may obscure a focussed element in some device's browsers, for example when navigating by keyboard and using the 'shift + tab' keys to change focus to an element higher on the page. This accessibility limitation should be carefully considered when weighing up any overall benefits of implementing this navigation pattern.

Options available

Sticky horizontal nav

Sticky horizontal nav

This example shows a number of linked content blocks with various margins and padding values. Current section highlighting on mobile is enabled.

Example

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Testimonials

Vertical padding and background colour. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Visiting

Vertical padding. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

News

Vertical margin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Contact

Code

 <!-- Begin pattern: sticky-nav //-->
    <nav id="nav-top" class="sticky-nav affix-top" aria-label="Page content navigation">
        <div class="container">
            <div class="sticky-nav__toggle">
                <button class="sticky-nav__toggle-button" aria-expanded="false">Contents</button>
                <span id="sticky-nav__active-section"></span>
            </div>
            <ul class="sticky-nav__menu">
                <li><a href="#courses" class="sticky-nav__menu--link">Courses</a></li>
                <li><a href="#testimonials" class="sticky-nav__menu--link">Testimonials</a></li>
                <li><a href="#visiting" class="sticky-nav__menu--link">Visiting</a></li>
                <li><a href="#news" class="sticky-nav__menu--link">News</a></li>
                <li><a href="#contact" class="sticky-nav__menu--link">Contact</a></li>
            </ul>
        </div>
    </nav>
<!-- End pattern: sticky-nav //-->
    <section id="courses" class="section__anchor--sticky" aria-labelledby="courses-heading">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h3 id="courses-heading">Courses</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam <a href="https://www.google.com">gravida</a> posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="testimonials" class="section__anchor--sticky" aria-labelledby="testimonials-heading">
        <div class="padding-top padding-bottom sta-grey-light">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h3 id="testimonials-heading">Testimonials</h3>
                        <p>Vertical padding and background colour. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam <a href="https://www.google.com">gravida</a> posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="visiting" class="section__anchor--sticky" aria-labelledby="visiting-heading">
        <div class="padding-top padding-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h3 id="visiting-heading">Visiting</h3>
                        <p>Vertical padding. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam <a href="https://www.google.com">gravida</a> posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="news" class="section__anchor--sticky" aria-labelledby="news-heading">
        <div class="margin-top--half margin-bottom--half">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h3 id="news-heading">News</h3>
                        <p>Vertical margin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam <a href="https://www.google.com">gravida</a> posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact" class="section__anchor--sticky" aria-labelledby="contact-heading">
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h3 id="contact-heading">Contact</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam <a href="https://www.google.com">gravida</a> posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>