Link list
Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.
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.