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
• use to list a group of links
• use the horizontal variant when necessary to save vertical space.

Don’t

• open links in new tabs
• 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
/>

Related components

• 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.