LinkList
Notes
Maps through each link and renders them in a list.
When inlineAboveBreakpoint
is null
, the list only
renders as a column, at all breakpoints. When inlineAboveBreakpoint
is set to one of the breakpoints (ie 'lg'), then at that breakpoint
and above, the list is moved inline, with default pipes |
as separators.
Props
- className
string
['']
Applied to the
<ul />
parent element - linkClassName
string
Applied to each link in the list
- linksarrayOf [shape {]text
any
*The text of the link
hrefstring
The href of the link
tagNameany
Tag for the link, defaults to a standard anchor
}tostring
When using React Router, the links will often receive a 'to' prop
Array of links to list
- inlineAboveBreakpoint
oneOf(null, 'sm', 'md', 'lg', 'xl', 'xxl')
[null]
If null, links will render in
block
only, at all breakpoints. When set to a breakpoint, the list renders inline above that breakpoint - inlineSeparator
any
['|']
Replaces default
|
as separator for inline links.inlineAboveBreakpoint
must have a truthy value - paddingBetweenInlineLinks
number
[0]
Gives the links some additional tap space between each link when inline. It applies padding-x for all links except first, which only applies padding-right. Number corresponds to Spacing Guidelines
<LinkListinlineAboveBreakpoint="lg"paddingBetweenInlineLinks={2}linkClassName="color-greenAccent"links={[{text: "Change the window",href: "#",tagName: "a"},{text: "Width to see",href: "#",tagName: "a"},{text: "The link list rendered",href: "#",tagName: "a"},{text: "Inline or block",href: "#",tagName: "a"}]}/>