Examples
Props
SimpleList
| 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
| 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
| 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-v6-c-simple-list | --pf-v6-c-simple-list__item-link--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__item-link--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__item-link--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__item-link--PaddingInlineStart | 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 | --pf-v6-c-simple-list__item-link--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__item-link--FontSize | 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 | --pf-v6-c-simple-list__item-link--m-current--BackgroundColor | (In light theme) 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 | --pf-v6-c-simple-list__item-link--hover--BackgroundColor | (In light theme) 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 | --pf-v6-c-simple-list__item-link--m-link--Color | (In light theme) #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 | --pf-v6-c-simple-list__item-link--m-link--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-simple-list | --pf-v6-c-simple-list__section--section--MarginBlockStart | 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.pf-m-link | --pf-v6-c-simple-list__item-link--hover--Color | (In light theme) #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: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:is(:hover, :focus) | --pf-v6-c-simple-list__item-link--Color | (In light theme) #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.pf-m-current | --pf-v6-c-simple-list__item-link--Color | (In light theme) #151515 | ||
| ||||