Progressive Enhancement?

[ausminternet]

I everyone,

We try to make our NextJS Site as usable as possible without javascript. Next itself has a lot of progressive enhancement built-in and we try to use them. headless-ui however is not working that well with no javascript.

The Menu for example doesn't render anything if javascript is not present. From the docs:

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/settings">
            Settings
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/support">
            Support
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-[focus]:bg-blue-100" href="/license">
            License
          </a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

I would suggest, that all the links and the button-text would simply render in place. Additionally the menu could have a data-activated or something, that can be used to style the links if no js is present.

[Sivamani-18]

To make the menu links and button text render in place without JavaScript, you can provide a fallback for non-JavaScript users. One approach is to conditionally render different elements based on whether JavaScript is enabled. Here is a way to implement this:

1. Render the menu items in a noscript tag for non-JavaScript users.
2. Add a data-activated attribute to style the links when JavaScript is not present.

Here is the modified code:

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

function Example() {
  return (
    <>
      {/* This part is for users with JavaScript enabled */}
      <Menu>
        <MenuButton>My account</MenuButton>
        <MenuItems>
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/settings">
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/support">
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-[focus]:bg-blue-100" href="/license">
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>

      {/* This part is for users with JavaScript disabled */}
      <noscript>
        <div data-activated>
          <a className="block bg-blue-100" href="/settings">
            Settings
          </a>
          <a className="block bg-blue-100" href="/support">
            Support
          </a>
          <a className="block bg-blue-100" href="/license">
            License
          </a>
        </div>
      </noscript>
    </>
  )
}

export default Example;

In this example:

• The Menu component is used as usual for users with JavaScript enabled.
• The noscript tag contains plain HTML links that will only be rendered if JavaScript is disabled.
• You can use the data-activated attribute to apply specific styles when JavaScript is not present.

[ausminternet]

Thanks for your quick reply and your proposal!

I am totally aware that I could do this. But I would like to rather not duplicate half of my component and therefor asking for a build-in no-script fallback ;)