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 VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Content rendered inside the SimpleList |
| className | string | No | '' | Additional classes added to the SimpleList container |
| onSelect | ( ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => void | No | Callback when an item is selected |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Content rendered inside the SimpleList group |
| className | string | No | '' | Additional classes added to the SimpleList <ul> |
| titleClassName | string | No | '' | Additional classes added to the SimpleList group title |
| title | React.ReactNode | No | '' | Title of the SimpleList group |
| id | string | No | '' | ID of SimpleList group |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Content rendered inside the SimpleList item |
| className | string | No | '' | Additional classes added to the SimpleList <li> |
| component | 'button' | 'a' | No | 'button' | Component type of the SimpleList item |
| componentClassName | string | No | '' | Additional classes added to the SimpleList <a> or <button> |
| componentProps | any | No | Additional props added to the SimpleList <a> or <button> | |
| isCurrent | boolean | No | false | Indicates if the link is current/highlighted |
| onClick | (event: React.MouseEvent | React.ChangeEvent) => void | No | () => {} | OnClick callback for the SimpleList item |
| type | 'button' | 'submit' | 'reset' | No | 'button' | Type of button SimpleList item |
| href | string | No | '' | Default hyperlink location |
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 | 500 | ||
| .pf-c-simple-list | --pf-c-simple-list__item-link--hover--Color | #06c | ||
| .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 | #06c | ||
| .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 | 500 | ||
| .pf-c-simple-list | --pf-c-simple-list__item-link--active--Color | #06c | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .pf-c-simple-list | --pf-c-simple-list__section--section--MarginTop | 0.5rem | ||
| .pf-c-simple-list__item-link.pf-m-current | --pf-c-simple-list__item-link--FontWeight | 500 | ||
| .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 | ||
| .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 | #06c | ||
| .pf-c-simple-list__item-link:focus | --pf-c-simple-list__item-link--FontWeight | 500 | ||
| .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 | #06c | ||
| .pf-c-simple-list__item-link:active | --pf-c-simple-list__item-link--FontWeight | 500 | ||
| .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 | #06c | ||
