Progressive Enhancement? #3406
ausminternet
started this conversation in
General
Replies: 1 comment 1 reply
-
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:
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:
|
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
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:I would suggest, that all the links and the button-text would simply render in place. Additionally the
menu
could have adata-activated
or something, that can be used to style the links if no js is present.Beta Was this translation helpful? Give feedback.
All reactions