Directional Link

The Directional Link Component allows users to navigate sequences of associated content forward and backward.

Usage, Best Practice, and Accessibility

Usage

WYSIWYG (Folwell CKEditor)

  1. From Layout Builder, select + Add Block.  

    Layout Builder interface showing options to add and configure content blocks

  2. In the right-sidebar menu, select + Create content block > Custom Component. 

    create content block displayed in white text on a dark gray background

  3. Select Folwell Component 

    Folwell component label displayed in white text on a dark gray background

  4. Populate the Title (required, though displaying title is optional), then select Folwell Directional Link from the Folwell Component List dropdown menu.

    A list of Folwell component names displayed on a maroon background

  5. Populate the Title (required, though displaying title is optional) and the Body sections with their respective text content.

    User interface in Drupal for adding content
  6. Within the same window, scroll down to the Next Page Image section, and select Add media to display the media library and add a 1:1 aspect ratio (square) image to be displayed with the directional link.

  7. Upload or select an image from the media library window.

    The Media Library window in Drupal

  8. In the Next Page Title section, begin typing the title of the content you want linked as the “next” page the user should navigate to, select the appropriate content you want linked, then type your own custom text in the Link text input box. Be sure your custom text is reflective of the content and image you’ve chosen.

    User interface in Drupal for adding the next page title and link
  9. Select the Add Block button at the bottom of the window to place your Directional Link component in your page, then select Save Layout in Layout Builder to save your changes for review.
Best Practice
  • Use a 1:1 square aspect ratio image.
  • Ensure the Link text is descriptive or reflective of the associated content (usually a title).
  • Ensure uploaded or selected images from the media library are accessible.
  • Design to complement standard back/next navigation in a linear sequence, not to be navigation of its own.
  • Use this component to navigate through a small number of pages. For designs that require navigation through a large number of pages, it is recommended to use the pagination feature available in Drupal views.
Accessbility
  • Users should be able to use the appropriate heading hierarchy for this component
  • Should be able to navigate using keyboard
  • The component uses a <nav> element, which helps improve accessibility by allowing screen readers and assistive technologies to identify it as a navigation landmark.