Skip to content
PatternFly logo

Simple list

A simple list provides a list of selectable items that can be shown within a page. Each item is described by a text label. The list may be divided into logical sections by introducing group headers.

Examples

Simple list

Grouped list

Uncontrolled simple list

Props

SimpleList

*required
NameTypeDefaultDescription
aria-labelstringaria-label for the <ul> element that wraps the SimpleList items.
childrenReact.ReactNodenullContent rendered inside the SimpleList
classNamestring''Additional classes added to the SimpleList container
isControlledbooleantrueIndicates whether component is controlled by its internal state
onSelect( ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => voidCallback when an item is selected

SimpleListGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the SimpleList group
classNamestring''Additional classes added to the SimpleList <ul>
idstring''ID of SimpleList group
titleReact.ReactNode''Title of the SimpleList group
titleClassNamestring''Additional classes added to the SimpleList group title

SimpleListItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the SimpleList item
classNamestring''Additional classes added to the SimpleList <li>
component'button' | 'a''button'Component type of the SimpleList item
componentClassNamestring''Additional classes added to the SimpleList <a> or <button>
componentPropsanyAdditional props added to the SimpleList <a> or <button>
hrefstring''Default hyperlink location
isActivebooleanfalseIndicates if the link is current/highlighted
Deprecated: isCurrentbooleanfalseplease use isActive instead
itemIdnumber | stringid for the item.
onClick(event: React.MouseEvent | React.ChangeEvent) => void() => {}OnClick callback for the SimpleList item
type'button' | 'submit' | 'reset''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
400
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Color
#151515
.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
#151515
.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
400
.pf-c-simple-list--pf-c-simple-list__item-link--active--Color
#151515
.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
400
.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:hover--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeight
400
.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
#151515
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeight
400
.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
#151515
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--FontWeight
400
.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

View source on GitHub