Skip to content
Patternfly Logo

Simple list

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Simple list

Grouped list

Uncontrolled simple list

Props

SimpleList

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the SimpleList
classNamestringNo''Additional classes added to the SimpleList container
isControlledbooleanNotrueIndicates whether component is controlled by its internal state
onSelect( ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => voidNoCallback when an item is selected

SimpleListGroup

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the SimpleList group
classNamestringNo''Additional classes added to the SimpleList <ul>
idstringNo''ID of SimpleList group
titleReact.ReactNodeNo''Title of the SimpleList group
titleClassNamestringNo''Additional classes added to the SimpleList group title

SimpleListItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the SimpleList item
classNamestringNo''Additional classes added to the SimpleList <li>
component'button' | 'a'No'button'Component type of the SimpleList item
componentClassNamestringNo''Additional classes added to the SimpleList <a> or <button>
componentPropsanyNoAdditional props added to the SimpleList <a> or <button>
hrefstringNo''Default hyperlink location
isActivebooleanNofalseIndicates if the link is current/highlighted
Deprecated: isCurrentbooleanNofalseplease use isActive instead
itemIdnumber | stringNoid for the item.
onClick(event: React.MouseEvent | React.ChangeEvent) => voidNo() => {}OnClick callback for the SimpleList item
type'button' | 'submit' | 'reset'No'button'Type of button SimpleList item

CSS variables

.pf-c-simple-list--pf-c-simple-list__item-link--PaddingTop
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingBottom
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--BackgroundColor
#fff
.pf-c-simple-list--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__item-link--FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--hover--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--focus--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--active--Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--active--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--active--FontWeight
700
.pf-c-simple-list--pf-c-simple-list__title--PaddingTop
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingBottom
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__title--FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__title--Color
#6a6e73
.pf-c-simple-list--pf-c-simple-list__title--FontWeight
700
.pf-c-simple-list--pf-c-simple-list__section--section--MarginTop
0.5rem
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--FontWeight
700
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--Color
#06c
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--Color
#06c
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeight
700
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--Color
#06c
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeight
700
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--Color
#06c

View source on GitHub