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 Header

This component is a menu that goes across the top of a website. It helps users know what page of a website they're on, and lets them access the main sections of a site through top-level navigation.

Get the UI kit

Example

<som-header
  home-link="/DigitalGuidelines"
  app-name="Digital Guidelines"
  department-name="Department of Technology, Management, and Budget"
  main-content-id="headerExample" 
  breakpoint="none"
  sticky="false"
>
  <som-list slot="header-menu" type="header">
    <som-list-parent-item display-name="Examples">
      <som-list-item><a href="#">Link 1</a></som-list-item>
    </som-list-parent-item>
  </som-list>
</som-header>
<div id='headerExample'></div>

Props

AttrTypeDefaultDocs

app-name

string

''

This property is the name of the application.

breakpoint

"lg" | "md" | "none" | "sm" | "xl"

'lg'

This property is the breakpoint where the mobile navigation should take effect. Setting the value to "none" will always show the flyout menu.

department-name

string

''

This property is the name of the department where the application resides.

home-link

string

null

This optional property is used to set a link on the header logo and title text.

main-content-id

string

''

This property is the ID of the main content section of the application. It is used to establish a connection for the "skip navigation" link. This is a required field

sticky

boolean

false

This boolean determines if the header should stick to the top of scroll with the content

Methods

NameReturnsDocs

closePanelMenu

Promise will resolve when the close animation ends.

This method will close the panel menu if opened. It can be useful when a menu link is clicked but the page doesn't refresh.

Slots

NameDocs

header-menu

This slot is used for the main horizontal header menu.

panel-menu

This slot is used for the fly out panel menu.

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