ListNavigation
Import
import ListNavigation from '@govuk-react/list-navigation';
Usage
Simple
import { ListNavigation, Link } from 'govuk-react';
<ListNavigation>
<Link href="/section-a">Section A</Link>
<Link href="/section-b">Section B</Link>
</ListNavigation>
Using React Router with Link
component for GDS styled links
import { Link as RouterLink } from 'react-router-dom';
import { ListNavigation, Link } from 'govuk-react';
<ListNavigation listStyleType="circle">
<Link as={RouterLink} to="/link-a">Link A</Link>
<Link as={RouterLink} to="/link-b">Link B</Link>
</ListNavigation>
References:
TODO:
- Consider using the context API https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md
- Fix active state overlaping siblings
Properties
Prop | Required | Default | Type | Description |
---|---|---|---|---|
children |
true | `````` | node | List navigation content |
listStyleType |
undefined |
string | CSS value for list-style-type
|