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

Component Mobile Subheader

The mobile subheader is a menu used to make browsing easier on mobile devices. It's useful when you have a lot of menus on the same page. This component is used with the header component.

Get the UI kit

Example

Resize browser to see som-mobile-subheader component.

Link 1Link 2Link 3List heading 1Link 4Link 5Link 6
<p>Resize browser to see som-mobile-subheader component.</p>
<som-mobile-subheader subheader-title="Subheader Example Menu" breakpoint="lg">
  <som-list type="sidebar">
    <som-list-item><a href="#">Link 1</a></som-list-item>
    <som-list-item><a href="#">Link 2</a></som-list-item>
    <som-list-item><a href="#">Link 3</a></som-list-item>
    <som-list-header>List heading 1</som-list-header>
    <som-list-item><a href="#">Link 4</a></som-list-item>
    <som-list-item><a href="#">Link 5</a></som-list-item>
    <som-list-item><a href="#">Link 6</a></som-list-item>
  </som-list>
</som-mobile-subheader>

Props

AttrTypeDefaultDocs

breakpoint

string

'lg'

This property is the breakpoint where the mobile navigation should take effect.

subheader-title

string

''

This property is the title of mobile subheader.

Methods

NameReturnsDocs

closeMobileMenu

Promise<void>
Withering

Withering content has known issues, but is still generally recommended to use.

Withering content has known issues, but is still generally recommended to use.

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