Menu language

In progress

Menu language component is used to provide a language switcher component for the site.

Example

Mobile:

   <div style="position: relative; width: 300px; height: 30px;">
     <hy-menu-language labels='[{"open":"Open language list","close":"Close language list"}]' is-mobile data-menu-language='[
        {"langCode":"fi","abbr":"fin","label":"Finnish","url":"/fi"},
        {"langCode":"en","abbr":"eng","label":"English","url":"/en","isActive":"true"},
        {"langCode":"sv","abbr":"swe","label":"Swedish","url":"/sv","isDisabled":"true"}
     ]' />
    </div>

Desktop:

   <div style="position: relative; width: 300px; height: 30px;">
      <hy-menu-language is-mobile=false labels='{"open":"Open", "close":"Close"}' data-menu-language='[
        {"langCode":"fi","abbr":"fin","label":"Finnish","url":"/fi","isDisabled":"true"},
        {"langCode":"en","abbr":"eng","label":"English","url":"/en","isActive":"true"},
        {"langCode":"sv","abbr":"swe","label":"Swedish","url":"/sv"}
      ]' />
    </div>

Properties

Property	Attribute	Description	Type	Default
dataMenuLanguage	data-menu-language	Language links either in JSON format or as a string.	MenuLanguage[] \| string	undefined
isMobile	is-mobile	If true, theme is more suitable for mobile use.	boolean	false
labels	labels	Provides labels for the component.	ComponentLabels[] \| string	undefined

Menu language item Properties

Property	Attribute	Description	Type	Default
abbr	abbr	Abbreviation for the language.	string	undefined
isActive	is-active	Is current item active.	boolean	false
isDisabled	is-disabled	True if translation for that language doesn't exist	boolean	false
isMobile	is-mobile	Is mobile layout active.	boolean	false
label	label	Label for the language.	string	undefined
langCode	lang-code	Language code for the language.	string	undefined
url	url	URL where to switch the language.	string	undefined

---

Used by

• hy-menu
• hy-site-header

Depends on

• hy-menu-language-item
• hy-icon