Link columns component is a simple list of vertical links that can be used to group related links. It’s useful when you want a group of links to stand out on a page as this style of list has more visual emphasis than a traditional link list.
The link columns component consists of a single continuous list of links that can be styled across 1-3 columns (2 columns is the default).
2-columns (default) – with ‘View all’ link (optional)
3-columns
Usage guidelines
The link columns component can be used to provide users with additional navigation options or resources related to the current page or content.
Vertical lists are useful for links because they provide a clear, organised, and easily scannable structure for users when navigating a website or application. They can help users quickly identify and access the information they need, resulting in a more user-friendly experience.
When to use it
- On landing pages that don’t include side navigation
- On landing pages where you want to group a list of related navigation links with more emphasis than traditional link lists
When not to use it
- For lists of navigation that aren’t related
- In forms
- To link to content on the same page, consider in-page navigation
- On pages that have side-navigation that duplicates links within the list
How to use
Do
- Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference
- Use descriptive and concise link text that accurately reflects the destination or purpose of the link
- Use a clear heading (e.g., “Related links”) to label the list of links and provide context
Don’t
- Have link columns that span larger than 60 characters, on large screens consider splitting the links into multiple columns as this will improve a user’s ability to scan the content
- Don’t include an excessive number of links, as this can be overwhelming for users and make it difficult to find the desired information
- Don’t use this component to replace a site-wide menu