I am still learning JavaScript, React and GatsbyJS.

I have difficult to readjust the dropdowm menu list (ul > li > input label > ul > li), replicating the original codes of @Smakosh's gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx which is options selection (select > option) because of value={lang} onChange={e => selectLanguage(e.target.value)} that the list does not have. I wanted to use data-aria, but I do not use Bootstrap and jQuery.

• The original codes of gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx:

  const SelectLanguage = ({ selectLanguage, lang }) => (
    <select value={lang} onChange={e => selectLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="ar">عربي</option>
      <option value="pt">Português</option>
    </select>
  )
  

  I tried to readjust it to the list (dropdown) based on codepen.io/Tont/pen/hdsev:

  const SelectLanguage = ({ selectLanguage, lang }) => (
    <li>
        <Input id="languages" type="checkbox" name="menu" href={lang} onChange={e => selectLanguage(e.target.value)}/>
        <Label for="languages">Languages</Label>
        <Submenu className="submenu">
          <li><a href="en">English</a></li>
          <li><a href="es">Español</a></li>
        </Submenu>
    </li>
  
  )
  

• The original codes of gatsby-starter-i18n/blob/master/src/components/theme/Header/index.jsx:

  const Header = () => (
      <Context.Consumer>
          {({ toggleLanguage, lang }) => (
              <StyledHeader>
                  <Navbar as={Container}>
                      <Links>
              {/* ... */}
                          <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
                      </Links>
                  </Navbar>
              </StyledHeader>
          )}
      </Context.Consumer>
  )
  

  I changed the codes based on that pen:

  const Header = () => (
    <Context.Consumer>
      {({ toggleLanguage, lang }) => (
        <StyledHeader>
          <Navegador id="menu">
            <li>
              <Links>
                {/* ... */}
                <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
              </Links>
            </li>
          </Navegador>
        </StyledHeader>
      )}
    </Context.Consumer>
  )
  

Source

• @Smakosh's Gatsby Starer i18n
  • theme/Header/SelectLanguage.jsx
  • theme/Header/index.jsx
• Pure CSS Click Dropdowm Menu