Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component List Item

This component allows you to display a list of items in an organized manner. It's used with the list component.

Get the UI kit

Example

List item 1List item 2List item 3
<som-list type="sidebar" id="sidebarList">
  <som-list-item active><a href="#">List item 1</a></som-list-item>
  <som-list-item><a href="#">List item 2</a></som-list-item>
  <som-list-item><a href="#">List item 3</a></som-list-item>
</som-list>

Props

AttrTypeDefaultDocs

active

boolean

false

This boolean is used to set the active list item.

show-divider

boolean

false

This boolean is used to set the divider.

type

"dropdown" | "header" | "panel" | "sidebar"

'panel'

This property determines what style the list will use.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source