Collapse Menu

Collapse menus provide a list of links that display on desktop but collapse into an accordion on mobile. They are used in the site footer for sets of links that will be condensed on mobile.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<div class="collapse-menu">
	<h3 class="collapse-menu__title">Campus Links</h3>
	<ul class="collapse-menu__list">
		<li class="collapse-menu__item"><a href="http://around.uoregon.edu/">News</a> <span class="low-priority">|</span> <a href="http://calendar.uoregon.edu/">Events</a></li>
		<li class="collapse-menu__item"><a href="//uoregon.edu/maps">Maps</a> <span class="low-priority">|</span> <a href="//uoregon.edu/directions">Directions</a></li>
		<li class="collapse-menu__item"><a href="//uoregon.edu/azindex">A-Z Index</a></li>
		<li class="collapse-menu__item"><a href="//uoregon.edu/findpeople">Find People</a></li>
	</ul>
</div>

Usage

Place collapse menus in the custom content of your site footer region. They work best when inside a grid with several collapse menus in it.

Guidance

Usage Guidance

• Do not use as a general accordion: The collapse menus only collapse on mobile, and should not ge used as a general purpose accordion component. We do not currently provide an accordion component due to them not working well for usability or SEO.

Accessibility Guidance

• Ensure the correct heading level for the title: Make sure the heading is correct on the title in the button element.

Elements

Element	Description	Usage	Required	Multiple
Title	The list title, is wrapped by a button when JS is active, always visible	Limit the title to a word or short phrase	Yes	No
List	The list of links in the collapse menu, not visible on mobile when collapsed		Yes	No
Item	The links in the list	Include at least 2 links	Yes	Yes

Aria Labels

Aria Label	Description
aria-expanded	Added to the button element of the collapse menu. Set to true on the button element when the expanded list is visible. Set to false when the list is collapsed.

Keyboard Navigation

Key Command	Description
enter or space	Open or close the collapse menu when focus is on the title element