Link list

import { ... } from '@ag.ds-next/react/link-list';

<LinkList
	links={[
		{ href: '#', label: 'Home' },
		{ href: '#', label: 'Establishments' },
		{ href: '#', label: 'Applications' },
		{
			href: 'https://design-system.agriculture.gov.au',
			label: 'External link',
			target: '_blank',
			rel: 'noopener',
		},
	]}
/>

The default link list component removes the normal bullets and spacing associated with a list.

Do

• use to navigate to other pages
• avoid opening links in new tabs
• use to list a group of links
• use the horizontal variant when necessary to save vertical space.

Don’t

• confuse with Inpage nav, which links to content on the current page.

Horizontal

Setting the horizontal prop will stack the links horizontally.

<LinkList
	links={[
		{ href: '#', label: 'Home' },
		{ href: '#', label: 'Establishments' },
		{ href: '#', label: 'Applications' },
		{
			href: 'https://design-system.agriculture.gov.au',
			label: 'External link',
			target: '_blank',
			rel: 'noopener',
		},
	]}
	horizontal
/>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack gap={1.5}>
		<H4>Link list: on light background</H4>
		<LinkList
			links={[
				{ href: '#', label: 'Home' },
				{ href: '#', label: 'Establishments' },
				{ href: '#', label: 'Applications' },
				{
					href: 'https://design-system.agriculture.gov.au',
					label: 'External link',
					rel: 'noopener',
					target: '_blank',
				},
			]}
		/>
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Link list: on dark background</H4>
		<LinkList
			links={[
				{ href: '#', label: 'Home' },
				{ href: '#', label: 'Establishments' },
				{ href: '#', label: 'Applications' },
				{
					href: 'https://design-system.agriculture.gov.au',
					label: 'External link',
					rel: 'noopener',
					target: '_blank',
				},
			]}
		/>
	</Stack>
</Box>

Related components

• Feature link list – Feature link list is a vertical list of important links. It adds prominence and additional information to help users find and understand the navigation items.
• Inpage nav – Also known as Page contents, Inpage nav links help users scan page contents and quickly navigate to different sections.
• List – Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.
• Side nav – A vertical list of links used for site navigation, typically placed beside body content.
• Sub nav – A horizontal list of links typically placed between the main navigation and page content.