Simple list

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 | null> | React.RefObject<HTMLAnchorElement | null>, 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
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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--PaddingBlockStart
0.25rem
  • --pf-v6-c-simple-list__item-link--PaddingBlockStart
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--PaddingInlineEnd
1rem
  • --pf-v6-c-simple-list__item-link--PaddingInlineEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--PaddingBlockEnd
0.25rem
  • --pf-v6-c-simple-list__item-link--PaddingBlockEnd
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--PaddingInlineStart
1rem
  • --pf-v6-c-simple-list__item-link--PaddingInlineStart
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
  • --pf-v6-c-simple-list__item-link--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • rgba(255, 255, 255, 0.0000)
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--Color
(In light theme) #4d4d4d
  • --pf-v6-c-simple-list__item-link--Color
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--FontSize
0.875rem
  • --pf-v6-c-simple-list__item-link--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--m-current--Color
(In light theme) #151515
  • --pf-v6-c-simple-list__item-link--m-current--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--m-current--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-simple-list__item-link--m-current--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--hover--Color
(In light theme) #4d4d4d
  • --pf-v6-c-simple-list__item-link--hover--Color
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-simple-list__item-link--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--BorderRadius
4px
  • --pf-v6-c-simple-list__item-link--BorderRadius
  • --pf-t--global--border--radius--tiny
  • --pf-t--global--border--radius--100
  • 4px
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--m-link--Color
(In light theme) #0066cc
  • --pf-v6-c-simple-list__item-link--m-link--Color
  • --pf-t--global--text--color--link--default
  • --pf-t--global--text--color--link--100
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--m-link--m-current--Color
(In light theme) #004d99
  • --pf-v6-c-simple-list__item-link--m-link--m-current--Color
  • --pf-t--global--text--color--link--hover
  • --pf-t--global--text--color--link--200
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-simple-list--pf-v6-c-simple-list__item-link--m-link--hover--Color
(In light theme) #004d99
  • --pf-v6-c-simple-list__item-link--m-link--hover--Color
  • --pf-t--global--text--color--link--hover
  • --pf-t--global--text--color--link--200
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--PaddingBlockStart
0.5rem
  • --pf-v6-c-simple-list__title--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--PaddingInlineEnd
1rem
  • --pf-v6-c-simple-list__title--PaddingInlineEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--PaddingBlockEnd
0.5rem
  • --pf-v6-c-simple-list__title--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--PaddingInlineStart
1rem
  • --pf-v6-c-simple-list__title--PaddingInlineStart
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--FontSize
0.75rem
  • --pf-v6-c-simple-list__title--FontSize
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--Color
(In light theme) #151515
  • --pf-v6-c-simple-list__title--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-simple-list--pf-v6-c-simple-list__title--FontWeight
500
  • --pf-v6-c-simple-list__title--FontWeight
  • --pf-t--global--font--weight--body--bold
  • --pf-t--global--font--weight--200
  • 500
.pf-v6-c-simple-list--pf-v6-c-simple-list__section--section--MarginBlockStart
0.5rem
  • --pf-v6-c-simple-list__section--section--MarginBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-simple-list__item-link.pf-m-link--pf-v6-c-simple-list__item-link--Color
(In light theme) #0066cc
  • --pf-v6-c-simple-list__item-link--Color
  • --pf-v6-c-simple-list__item-link--m-link--Color
  • --pf-t--global--text--color--link--default
  • --pf-t--global--text--color--link--100
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-simple-list__item-link.pf-m-link--pf-v6-c-simple-list__item-link--hover--Color
(In light theme) #004d99
  • --pf-v6-c-simple-list__item-link--hover--Color
  • --pf-v6-c-simple-list__item-link--m-link--m-current--Color
  • --pf-t--global--text--color--link--hover
  • --pf-t--global--text--color--link--200
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-simple-list__item-link.pf-m-link--pf-v6-c-simple-list__item-link--m-current--Color
(In light theme) #004d99
  • --pf-v6-c-simple-list__item-link--m-current--Color
  • --pf-v6-c-simple-list__item-link--m-link--hover--Color
  • --pf-t--global--text--color--link--hover
  • --pf-t--global--text--color--link--200
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-simple-list__item-link:is(:hover, :focus)--pf-v6-c-simple-list__item-link--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-simple-list__item-link--BackgroundColor
  • --pf-v6-c-simple-list__item-link--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-simple-list__item-link:is(:hover, :focus)--pf-v6-c-simple-list__item-link--Color
(In light theme) #4d4d4d
  • --pf-v6-c-simple-list__item-link--Color
  • --pf-v6-c-simple-list__item-link--hover--Color
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-simple-list__item-link.pf-m-current--pf-v6-c-simple-list__item-link--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-simple-list__item-link--BackgroundColor
  • --pf-v6-c-simple-list__item-link--m-current--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-simple-list__item-link.pf-m-current--pf-v6-c-simple-list__item-link--Color
(In light theme) #151515
  • --pf-v6-c-simple-list__item-link--Color
  • --pf-v6-c-simple-list__item-link--m-current--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515