Quick Links

Presenting Related Links

Summary

The Quick Links block offers a compact way to present a list of related links. Default and button-style link options are available.

Audience

Site Managers can add Quick Links. Publishers can edit existing Quick Links blocks.

Quick Links Example

Quick Links example.

How To

  • 1

    On a Landing Page

    Add or edit a Band. (In this example, a 3-Column Band).

    • Add a Band:

    Add Band button.

    Add Band menu.

    • Choose a Column (in this example, Left).

    Left Column dropdown.

    • Edit an existing Band:

    Edit Band button.

    Titles

    Add Titles, if desired.

    • Full Width Top Title — In this example, Band Title.

    Full Width Top Title field.

    • This places a Top Title with an underline across the full width of the Band.

    Full Width Top Title.

    • Left Top Title — In this example, Drupal. (Left Top Title indicates the Title is being placed in the Left Colum of a 3-Column Band).

    Left Top Title field.

    • This places a Title above the Quick Links block.

    Add Quick Links

    • Under Child Paragraph, choose Add Quick Links from the Add dropdown menu.

    Add Quick Links Menu

    • In this example, Left Child Paragraph indicates the Quick Links block is being placed in the Left Column of a 3-Column-Band.
  • 2

    On a Site Page

    • Edit the Page.

    Add Quick Links

    • Choose Add Quick Links from the Add dropdown menu.

    Add Quick Links Menu

  • 3

    Quick Links Title

    • Quick Links Title  — Enter a Title for the Quick Links block. In this example, Drupal.

    Quick Links Title

  • 4

    Heading Level

    • Select a Heading Level for the Quick Links block.
    • Options include: None, h2, h3, h4, and h5. The default value is h3.

    Heading Level

  • 5

    Quick Links Description

    • Enter a description for the Quick Links block.

    Quick Links description

  • 6

    Quick Links

    Fields with an asterisk (*) are required.

    • URL (*) — Enter an address for the link.
      • Enter the title of a specific piece of content to find and select it.
        Other Options:
      • Enter an internal path (such as /node/add) or an external URL (such as http://digitalcommons.nc.gov).
      • Enter <front> to link to the front page.
      • Enter <nolink> to display link text only.
      • Enter <button> to display keyboard-accessible link text only.

    Quick Link URL field

    • Link Text — Enter the text for the link. In this example, Drupal Help Topics.

    Link Text field.

    Attributes

    • Expand the Attributes menu.

    Attributes menu.

    • Class — The Class field can be left blank or populated with a button style.
    • Default Link Style — Leave the Class field blank to keep the default link style:

    Class field default.

    Default link style.

    • Button Link Style — Enter btn btn-primary in the Class field to show a button link:

    Class button style.

    Button link style.

    • More (Link Button) — Enter more in the Class field to highlight a link to more information. In this example, "Learn more":

    Class more style.

    More link button style.

    • Title — When using the more option in the Class field, be sure to enter a Title (for screen readers).

    Title field.

  • 7

    Add Another Item

    To add more links:

    • Click Add Another Item.

    Add Another Item button.

  • 8

    Reorder Quick Links

    To reorder Quick Links:

    • Hover the mouse cursor over the Drag to Re-order icon.
    • Click-and-hold to drag the Quick Link entry up or down to the desired location.

    Drag-to-Reorder function.

  • 9

    Delete Quick Links

    There must be at least one (1) Quick Link to use the module.

    The URL field is required (*), and thus the first Quick Link entry cannot be deleted.

    To remove subsequent entries:

    • Delete everything in the URL, Link Text, Class, and Title fields for the entry to be deleted.
    • Save the page.

    Delete quick links

  • 10

    Save

    • Click Save, at the bottom of the Edit page, to save the page and view results.

    Save button.