Use a navigation block to create and manage a set of links to other web pages.

Best practices

  • Provide a descriptive heading.
  • Strive for seven or fewer links per block.
  • Strive for short link names (four or fewer words) that match the destination web page title.
  • May be used as a connection point for web pages when another navigation connection is not available.
<nav class="ContentBlock Page10 " aria-label="Lorem ipsum dolor">
    <h2>
        Lorem ipsum dolor
    </h2>
    <ul>
        <li>
            <a href="#">Lorem ipsum dolor sit amet consectetur</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolor sit amet consectetur</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolor sit amet consectetur</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolor sit amet consectetur</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolor sit amet consectetur</a>
        </li>
    </ul>
</nav>
<nav class="ContentBlock Page{{pageId}} {{pageClass}}" aria-label="{{groupHeading}}">
    <h2>
        {{groupHeading}}
    </h2>
    <ul {{ulClass}}>
        {{#each newLink }}
            <li>
                <a href="{{url}}">{{label}}</a>
            </li>
        {{/each}}
    </ul>
</nav>
{
  "pageId": 10,
  "groupHeading": "Lorem ipsum dolor",
  "pageClass": null,
  "ulClass": null,
  "newLink": [
    {
      "url": "#",
      "label": "Lorem ipsum dolor sit amet consectetur"
    },
    {
      "url": "#",
      "label": "Lorem ipsum dolor sit amet consectetur"
    },
    {
      "url": "#",
      "label": "Lorem ipsum dolor sit amet consectetur"
    },
    {
      "url": "#",
      "label": "Lorem ipsum dolor sit amet consectetur"
    },
    {
      "url": "#",
      "label": "Lorem ipsum dolor sit amet consectetur"
    }
  ]
}