Davidson Styleguide

Jump Links 

<div class="jump-links">
    <nav role="navigation" aria-labelledby="jump-links-label">
        <h2 id="jump-links-label">Jump to</h2>
        <ul>
            <li><a href="http://www.example.com/" class="">Section</a>
            </li>
            <li><a href="http://www.example.com/" class="">Another Section</a>
            </li>
            <li><a href="http://www.example.com/" class="">Third Section</a>
            </li>
        </ul>
    </nav>
</div>
 
{% if jump_links is not empty %}
<div class="jump-links">
  <nav role="navigation" aria-labelledby="jump-links-label">
    <h2 id="jump-links-label">Jump to</h2>
    <ul>
    {% for item in jump_links.items %}
      <li>{% include '@link' with { link: item.link } %}</li>
    {% endfor %}
    </ul>
  </nav>
</div>
{% endif %}
 
{
  "jump_links": {
    "items": [
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Section"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Another Section"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Third Section"
        }
      }
    ]
  }
}
  • Content: 
    .jump-links {
    margin-bottom: rr-gridbase(4);
    nav {
        @include rr-break-directive(m) {
            display: flex;
            align-items: center;
        }
    }
    h2, h3, h4, h5, h6 {
        background-color: color(gray-lightest);
        @include rr-font-compute(l, medium);
        padding-left: rr-gridbase(1);
        margin: 0;
        display: inline-flex;
        align-items: center;
        position: relative;
        margin-right: rem(30px);
        &:after {
            display: inline-block;
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0.9em 0 0.8em 0.8em;
            border-color: transparent transparent transparent color(gray-lightest);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 100%;
            right: 0;
        }
    }
    ul {
        @include clean;
        li {
            display: inline-block;
            line-height: rr-gridbase(4);
            &:after { 
                content: '/';
                display: inline-block;
                margin: 0 rr-gridbase(0.5);
            }
            &:last-child {
                &:after {
                    display: none;
                }
            }
            a {
                @include underline-link;
                font-weight: bold;
            }
        }
    }
}
  • URL: /components/raw/jump-links/jump-links.scss
  • Filesystem Path: patterns/molecules/navigation/jump-links/jump-links.scss
  • Size: 1.4 KB

These jump links can be used to jump to anchors on the same page.