The navigation is finished HTML when it arrives in the browser. The script adds things but changes nothing the structure relies on.
What works without the script
| What | With what |
|---|---|
| All links, active page, active path | written at build time |
| Expanding and collapsing folders | <details> and <summary> |
Menus of dropdown, mega, flyout by click | also <details> |
One folder per level (exclusive) | the name attribute of <details> |
| Opening and closing the mobile menu behind the burger button | a checkbox and CSS |
| Switching at the mobile breakpoint | media queries |
What the script adds
| What | Without the script |
|---|---|
persistState | nothing is remembered |
trigger: hover | menus only open by click |
| Closing menus on a click elsewhere, Escape, page change | they stay open until their folder is clicked again |
| Moving panels and lifting them out of columns | panels can stick out of the window or be cut off |
| Holding the page still behind the mobile menu, Escape | the page scrolls along |
Navigating with select and mobile: select | the menu does nothing |
| Closing folders that only expand on mobile on smartphones | they stay open |
| Open animation | folders open without transition |
| Scrolling the active page into view in a long sidebar | it stays where it is |
Why the animation needs the script
Folders that are already open on load — the active path, a remembered state — should not slide open on every page change. The animation is therefore tied to an attribute that the script only sets when someone touches the folder for the first time. Without the script there is no attribute, and without the attribute no animation.
Anyone who has reduced motion in their operating system (prefers-reduced-motion) gets none anyway.