Subnav Menus

A subnav menu, often referred to as a dropdown menu, hides additional nav links under a top-level navigation item. Users can click or tap the nav item to show-and-hide the additional links.

Usage

To create a subnav menu, include a details disclosure inside a nav menu list item. The <summary> element will automatically be styled to match your nav links.

Include an unordered list of subnav links as the content. When it expanded, it’s displayed as a floating menu.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<li><a href="#">About</a></li>
		<li>
			<details>
				<summary>Services</summary>
				<ul>
					<li><a href="#">Overview</a></li>
					<li><a href="#">Consulting</a></li>
					<li><a href="#">Coaching</a></li>
					<li><a href="#">Courses</a></li>
				</ul>
			</details>
		</li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">🔍</a></li>
	</ul>
</nav>

Exclusive Subnavs

If you have multiple subnav menus, you should add a [name] attribute on the <details> elements to create exclusive disclosures.

This will automatically any existing subnav menus when opening a new one.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<li><a href="#">About</a></li>
		<li>
			<details name="subnav">
				<summary>Services</summary>
				<ul>
					<li><a href="#">Overview</a></li>
					<li><a href="#">Consulting</a></li>
					<li><a href="#">Coaching</a></li>
					<li><a href="#">Courses</a></li>
				</ul>
			</details>
		</li>
		<li>
			<details name="subnav">
				<summary>Contact</summary>
				<ul>
					<li><a href="#">Help</a></li>
					<li><a href="#">Phone</a></li>
					<li><a href="#">Email</a></li>
				</ul>
			</details>
		</li>
		<li><a href="#">🔍</a></li>
	</ul>
</nav>

Enhanced Functionality

A full-featured subnav menu should have two additional features that the <details> element does not include…

1. Clicking outside of the subnav should close it.
2. Pressing the Esc key should close all open subnavs.

You can add these features by wrapping the entire .navbar in a <kelp-subnav> web component.

<kelp-subnav>
	<nav class="navbar">
		<!-- ... -->
	</nav>
</kelp-subnav>

Styling Subnavs

By default, subnav menu links look mostly like ordinary links. This provides a relatively blank slate for you to style them however you’d like rather than forcing a particular aesthetic on you.

The Kelp Cookbook (coming soon) includes a few recipes for customizing subnav menus, including…

• Styled underlines on :hover
• Background colors on :hover
• Styling the link associated with the current page
• Changing thelink colors