Menu
A plain list of links (e.g. the "Practice Areas" sidebar list). The current item is auto-detected by URL match, not a manual flag. Collapses into a dropdown below the tablet breakpoint (via the Selector atom — see that entry) — resize the preview to see it. Renders template-parts/molecules/menu.
The current item gets aria-current="page" automatically when its id matches get_queried_object_id() — not a manual flag. The third item below is set to this page's own ID to demonstrate it. The last item shows a per-item target="_blank" and a custom aria-label disclosing the new-tab/file-type context — inspect it with a screen reader or the accessibility tree. Below the tablet breakpoint this collapses into a dropdown (the "Mobile dropdown label"/"Mobile toggle color" controls above only affect that collapsed state) — narrow the browser or use devtools' device toolbar to see it.
Playground
Change a value below to update the preview live.
Usage
get_template_part( 'template-parts/molecules/menu', null, [
'items' => [
[ 'label' => 'Troubled Loans & Bankruptcy', 'url' => '/practice-areas/troubled-loans-bankruptcy/', 'id' => 123 ],
[ 'label' => 'Business Transactions & Capital Markets', 'url' => '/practice-areas/business-transactions/', 'id' => 124 ],
[ 'label' => 'Eminent Domain', 'url' => '/practice-areas/eminent-domain/', 'id' => 125 ],
[ 'label' => 'Land Use', 'url' => '/practice-areas/land-use/', 'id' => 126 ],
// Per item, both optional: 'target' (e.g. '_blank', gets rel="noopener
// noreferrer" automatically) and 'aria_label' (overrides the link's
// accessible name — visible text is unaffected).
[ 'label' => 'Firm Overview (PDF)', 'url' => '/firm-overview.pdf', 'target' => '_blank', 'aria_label' => 'Firm Overview (opens in a new tab, PDF)' ],
],
'classes' => '', // optional, appended alongside the menu class
'id' => '', // optional
'default_target' => '', // optional, e.g. '_blank' — fallback for any item without its own 'target'
'label' => 'Practice Areas', // optional — mobile dropdown toggle's visible text; falls back to aria_label, then "Menu"
'dark_toggle' => false, // optional — true for the darker body-copy toggle color instead of the default orange
] );