Agriculture Design System
Beta
Design System for the Export Service

Link list

Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/link-list';
Open in Playroom, opens in a new tab
<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
/>
  • 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.