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 Parent Item

List parent item is used to create a list item that can expand or collapse to reveal child elements.

Get the UI kit

Example

List item 1List item 2List item 3
<som-list type="header">
  <som-list-parent-item display-name="Examples">
    <som-list-item><a href="#" target="_blank">List item 1</a></som-list-item>
    <som-list-item><a href="#" target="_blank">List item 2</a></som-list-item>
    <som-list-item><a href="#" target="_blank">List item 3</a></som-list-item>
  </som-list-parent-item>
</som-list>

Props

AttrTypeDefaultDocs

collapsed

boolean

true

This property will toggle the open state.

display-name

string

''

This property represents the name that is displayed as the parent in the list.

horizontal-position

"left" | "right"

'left'

This property represents the horizontal position of the dropdown menu. This is used for header menu items with children and is helpful when the last item aligns to the right.

show-divider

boolean

false

This Boolean is used to set the divider.

type

"header" | "panel" | "sidebar"

'panel'

This property identifies the type of list.

Methods

NameReturnsDocs

close

Promise will resolve when the close animation ends.

This method will close the panel.

open

Promise will resolve when the open animation ends.

This method will open the panel.

Events

EventDetailDocs

beforeListClosed

any

This event is emitted before the list closes.

beforeListOpened

any

This event is emitted before the list opens.

listClosed

any

This event is emitted after the list closes.

listOpened

any

This event is emitted after the list opens.

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