5.1 – Folder rows

folderClick — expand or link

The whole row of an expandable folder is the click target. What it does is decided by folderClick:

options:
  folderClick: toggle   # toggle (default) | link

toggle — a click anywhere on the row opens or closes the folder. The folder page can then only be reached from this navigation through an extra entry: indexEntry: first puts “Overview” into the folder as its first child (3.2).

link — the row is a link to the folder page, and a separate expand button with the chevron sits at its right edge. That is the usual choice together with trigger: hover: the menu opens on hover, the click follows the link (5.2).

	toggle	link
Click on the title	expands	opens the folder page
Chevron	a hint, not a button of its own	a button of its own, always visible
Folder page reachable via	indexEntry: first	the title
For screen readers	one control with the title	a link and a button “Expand …”

Folders that only expand on mobile

With mobile: accordion, folders in tree, bar, tabs and columns expand only on smartphones (6.1). They always use link and button, whatever folderClick says — on the desktop their title should stay a link.

chevrons — the arrow

options:
  chevrons: false

Hides the chevron on folders with folderClick: toggle. With link it stays, because there it is the button. Which symbol the chevron is, is set by iconNames.chevron (7.1).

Open or closed

Option	Default	Effect
folderDefaultState	collapsed	open makes all folders start open
expandActive	true	folders on the path to the current page start open

Both apply to accordion. The menus of dropdown and mega and the panels of flyout always start closed — a menu that is already open on load covers the page.

exclusive — one folder per level

options:
  variant: accordion
  exclusive: true

Opening a folder closes the open one next to it. The browser does this itself through the name attribute of <details> — without a script, in current browsers. Older ones leave several open.

persistState — memory

options:
  variant: accordion
  persistState: true
  id: sidebar

Which folders someone opened or closed is remembered by the browser in localStorage and restored on the next page. The path to the current page still stays open as long as expandActive applies — a remembered “closed” does not win against the page you are on.

With persistState, always an id

It is stored under the navigation’s ID. Without id that is a checksum of all options — change any of them later and the memory is gone. A fixed id keeps it across changes (7.3).

Menus and panels (dropdown, mega, flyout) are never remembered.