The Links block organises a collection of links for a specific topic. It’s a simple way to present multiple links, making it easy for your audience to navigate to other relevant content. Links may go to other internal pages, external websites or to media files.
On this page
- Using the Links component
- Adding a Links block on a page
- Trending topics navigation pattern
- Links list with Chips variant guidelines
Using the Links block
The Links component has several variants with different options and displays. Select the variant that suits your content and in context with the overall layout of the page. If you want to use the sub-navigation links variant, follow the guide to Adding sub-navigation links.
Do
- When creating links follow the links guidelines.
- Limit of 10 items per list (break large lists up into smaller ones).
- For external links to other websites, an external icon will automatically appear.
- Should have a heading to provide context (H2 or H3). There is an option to prevent the display of H2 headings in the in page nav.
Don't
- Too many links can cause confusion for the audience about what is important or how to complete a task. Use links only when and where necessary.
Adding a Links block on a page
Landing page
To add a Links block go to the Layout screen, click Add block, Create content block and under Actions select Links.
Standard page
To add links on a standard page go to the Edit screen, scroll down to the Add block button and select Add Links from the dropdown.
Setting up your Links block
The different Variant options are:
-
- None: displays as a vertical list of links without the option for a heading or summary.
- Text links (previously inline): Displays the links in a horizontal line across the section.
- Vertical: displays a vertical list of links with the option to include a heading and summary before the list. Only on a standard page.
- Two up: option to include a heading and summary that displays on the left of the page, with a vertical link list on the right. Only on a standard page.
-
Link list - 2 columns
-
Link list - 3 columns
- Chips (previously tags): to display links to popular or trending topics. Chips are generally placed near the top of the page.
The different types of links that can be used are:
-
- Content: internal pages in the CMS. Start typing the name of the page to search or enter the page node number, for example /node/5215.
- Managed Link: links that have been created in the Managed links library. Start typing the name of the link or paste the full URL in the search box to bring up the Managed link.
- Media: resources like PDFs that have been uploaded to the media library. Start typing the name of the resource/media item to add a link to the item.
Click on Add Another item to add another link.
Links block with 'Chips' variant guidelines
The Chips variation has a specific purpose, which is to share important, relevant, targeted, or trending topics. You should be aware that links within the Chips variation may be replaced with other links due to automated site personalisation. Chips should never be used for general site navigation.
Using the Chips variation
Do
- Use only on standard or landing pages.
- Can be used anywhere on a page, not just at the top.
- Add a heading above your links. The heading provides important context about the links for the user. Heading examples include:
- 'Recommended for you'
- 'Trending topics'.
- Can be used to link to internal pages, external websites or media files.
- The link text (label) should be short and clear. Try to limit the text to 2-3 words. It should be sentence case without a full stop.
- Use Managed Links to customise the label text for external links. See how to use Managed links to create a short title for the link.
- You can select ‘short title’ for internal links but check the text as it may be too vague for use as the label. (The web pages you’re linking to will need to have short titles added to them). See how you can create page short title.
- Do not use generic link names, such as, 'Contact us' or 'Read more'. Generic links make no sense out of context and don't tell the audience where the link will take them.
- It’s recommended to add 3 – 5 links, although you can add up to 7 links if necessary.
Don’t
- Do not use for generic navigational links. This dilutes the importance and prominence of the component.
- Instead, consider using Cards, other Link list variations such as the sub-navigation links instead for navigational links.
- If the link is associated with a task, such as registering or booking, a call-to-action (CTA) button should be used instead. Find out more about buttons.
- Don’t use more than 1 on a page.
Learn more about using links on nsw.gov.au.
See links on nsw.gov.au
Check out Links to see how this works on a live page.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.