Estimated reading time : 2 min · Published October 7, 2026
Separate destination and disclosure
Decide whether each section title opens a page or reveals a list. If both functions matter, expose them as distinct controls. A small arrow beside a link is insufficient if the entire area changes between navigation and disclosure by device.
Label the trigger Menu or Navigation rather than relying on three lines alone. Match section labels to destination pages. Main navigation need not reproduce a whole catalogue: it can lead to indexes that offer search and filters.
Choose a simple panel or a real interruption
The W3C disclosure navigation example distinguishes ordinary links from ARIA application menus. Site navigation generally does not require a menu role and software-menu commands. Keep links and a control communicating expansion state.
If the page remains usable outside the panel, do not describe it as modal. If the panel covers and blocks all other content, provide a true interruption with closing and focus return. Its visual and assistive-technology behaviour must agree.
Test state and width changes
Open a submenu on desktop, narrow the window, then widen it again. Check that styles and states leave no invisible focusable links or ineffective controls. Closed panels must also leave the keyboard sequence.
Test a long translated label, zoom and an already-scrolled page. Navigation should not permanently obscure the title or block access to content. If background scrolling stops while open, restore normal behaviour after closing and after following a link.
Example: a section with an overview page
Educational example: Services opens an overview, while a neighbouring button reveals categories. On mobile, Menu exposes both functions with their labels. Testing opens a category, closes navigation and returns with Back. The useful section remains identifiable without an overlay preventing reading.
Reference documents
Content updated on October 7, 2026