Accessible disclosure navigation
Build a compact site menu with native disclosure behavior, descriptive links, and keyboard-visible focus.
Open folder
Build a compact site menu with native disclosure behavior, descriptive links, and keyboard-visible focus.
Create a compact, accessible site navigation disclosure using semantic HTML and complete dependency-free vanilla CSS. Use a labelled nav landmark containing native details and summary elements, so the menu opens and closes with built-in mouse, keyboard, and assistive-technology behavior—do not add JavaScript or manually set aria-expanded. Inside the open disclosure, include a semantic unordered list of descriptive anchor links and mark the current destination with aria-current="page". Give the summary a visible keyboard focus style and a decorative chevron hidden from assistive technology; rotate it only when details is open. Make links comfortable touch targets, preserve readable contrast, and ensure the layout fits from 320px. Include a prefers-reduced-motion rule for the chevron transition. Scope custom CSS under .cf-site-nav and ensure every custom selector/class is represented in the supplied HTML so editor edits update the live preview. Use system fonts only; no remote assets or frameworks. Explain that the sample fragment links and current-page destination should be replaced for the real site. Return complete HTML and CSS.