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

Use a Simple list when you need 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.

ExamplesPropsCSS Variables

Examples

Simple list

Grouped list

Props

SimpleList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the SimpleList
classNamestringNo''Additional classes added to the SimpleList container
onSelect( ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => voidNoCallback when an item is selected
SimpleListGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the SimpleList group
classNamestringNo''Additional classes added to the SimpleList <ul>
titleClassNamestringNo''Additional classes added to the SimpleList group title
titleReact.ReactNodeNo''Title of the SimpleList group
idstringNo''ID of SimpleList group
SimpleListItem properties
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>
isCurrentbooleanNofalseIndicates if the link is current/highlighted
onClick(event: React.MouseEvent | React.ChangeEvent) => voidNo() => {}OnClick callback for the SimpleList item
type'button' | 'submit' | 'reset'No'button'Type of button SimpleList item
hrefstringNo''Default hyperlink location

CSS Variables

.pf-c-simple-list--pf-c-simple-list__item-link--PaddingTopc_simple_list__item_link_PaddingTop
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingRightc_simple_list__item_link_PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingBottomc_simple_list__item_link_PaddingBottom
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingLeftc_simple_list__item_link_PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#fff
.pf-c-simple-list--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--FontSizec_simple_list__item_link_FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--Colorc_simple_list__item_link_m_current_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--BackgroundColorc_simple_list__item_link_m_current_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--FontWeightc_simple_list__item_link_m_current_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Colorc_simple_list__item_link_hover_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--hover--BackgroundColorc_simple_list__item_link_hover_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--Colorc_simple_list__item_link_focus_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--focus--BackgroundColorc_simple_list__item_link_focus_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--FontWeightc_simple_list__item_link_focus_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--active--Colorc_simple_list__item_link_active_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--active--BackgroundColorc_simple_list__item_link_active_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--active--FontWeightc_simple_list__item_link_active_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__title--PaddingTopc_simple_list__title_PaddingTop
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingRightc_simple_list__title_PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingBottomc_simple_list__title_PaddingBottom
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingLeftc_simple_list__title_PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__title--FontSizec_simple_list__title_FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__title--Colorc_simple_list__title_Color
#6a6e73
.pf-c-simple-list--pf-c-simple-list__title--FontWeightc_simple_list__title_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__section--section--MarginTopc_simple_list__section_section_MarginTop
0.5rem
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c