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

List item 2

Grouped list

Uncontrolled simple list

Props

SimpleList

*required
Name	Type	Default	Description
aria-label	string		aria-label for the <ul> element that wraps the SimpleList items.
children	React.ReactNode	null	Content rendered inside the SimpleList
className	string	''	Additional classes added to the SimpleList container
isControlled	boolean	true	Indicates whether component is controlled by its internal state
onSelect	( ref: React.RefObject<HTMLButtonElement> \| React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => void		Callback when an item is selected

SimpleListGroup

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the SimpleList group
className	string	''	Additional classes added to the SimpleList <ul>
id	string	''	ID of SimpleList group
title	React.ReactNode	''	Title of the SimpleList group
titleClassName	string	''	Additional classes added to the SimpleList group title

SimpleListItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the SimpleList item
className	string	''	Additional classes added to the SimpleList <li>
component	'button' \| 'a'	'button'	Component type of the SimpleList item
componentClassName	string	''	Additional classes added to the SimpleList <a> or <button>
componentProps	any		Additional props added to the SimpleList <a> or <button>
href	string	''	Default hyperlink location
isActive	boolean	false	Indicates if the link is current/highlighted
itemId	number \| string		id 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

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--PaddingTop	0.25rem
--pf-v5-c-simple-list__item-link--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--PaddingRight	1rem
--pf-v5-c-simple-list__item-link--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--PaddingBottom	0.25rem
--pf-v5-c-simple-list__item-link--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--PaddingLeft	1rem
--pf-v5-c-simple-list__item-link--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--BackgroundColor	#fff
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--Color	#151515
--pf-v5-c-simple-list__item-link--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--FontSize	0.875rem
--pf-v5-c-simple-list__item-link--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--FontWeight	400
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--m-current--Color	#06c
--pf-v5-c-simple-list__item-link--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--m-current--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--m-current--FontWeight	400
--pf-v5-c-simple-list__item-link--m-current--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--hover--Color	#151515
--pf-v5-c-simple-list__item-link--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--hover--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--focus--Color	#151515
--pf-v5-c-simple-list__item-link--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--focus--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--focus--FontWeight	400
--pf-v5-c-simple-list__item-link--focus--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--active--Color	#151515
--pf-v5-c-simple-list__item-link--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--active--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--active--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__item-link--active--FontWeight	400
--pf-v5-c-simple-list__item-link--active--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--PaddingTop	0.5rem
--pf-v5-c-simple-list__title--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--PaddingRight	1rem
--pf-v5-c-simple-list__title--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--PaddingBottom	0.5rem
--pf-v5-c-simple-list__title--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--PaddingLeft	1rem
--pf-v5-c-simple-list__title--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--FontSize	0.875rem
--pf-v5-c-simple-list__title--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--Color	#6a6e73
--pf-v5-c-simple-list__title--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__title--FontWeight	700
--pf-v5-c-simple-list__title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700
	.pf-v5-c-simple-list	--pf-v5-c-simple-list__section--section--MarginTop	0.5rem
--pf-v5-c-simple-list__section--section--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-simple-list__item-link:hover	--pf-v5-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list__item-link:hover	--pf-v5-c-simple-list__item-link--Color	#151515
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list__item-link:focus	--pf-v5-c-simple-list__item-link--FontWeight	400
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--focus--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list__item-link:focus	--pf-v5-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list__item-link:focus	--pf-v5-c-simple-list__item-link--Color	#151515
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list__item-link:active	--pf-v5-c-simple-list__item-link--FontWeight	400
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--active--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list__item-link:active	--pf-v5-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--active--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list__item-link:active	--pf-v5-c-simple-list__item-link--Color	#151515
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-simple-list__item-link.pf-m-current	--pf-v5-c-simple-list__item-link--FontWeight	400
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--m-current--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-simple-list__item-link.pf-m-current	--pf-v5-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--m-current--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-simple-list__item-link.pf-m-current	--pf-v5-c-simple-list__item-link--Color	#06c
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c

View source on GitHub

Simple list

Examples

Simple list

Grouped list

Group 1

Group 2

Uncontrolled simple list

Props

SimpleList

SimpleListGroup

SimpleListItem

CSS variables