Collapse Menus
A collapse menu hides navigation menu items in an element that expands-and-collapses, using a button to toggle it’s visibility.
This pattern is sometimes referred to as a hamburger menu, because the icon associated with this navigation pattern looks like a hamburger.
Usage
This pattern uses the <dialog> drawer component for the menu button and content.
<nav class="navbar">
<a class="logo" href="#">Kelp UI</a>
<ul>
<li>
<button
command="show-modal"
commandfor="collapsed-nav"
aria-label="Menu"
>
☰
</button>
</li>
</ul>
</nav>
<dialog
id="collapsed-nav"
class="drawer"
closedby="any"
>
Menu content...
</dialog>No Wrapping
You can use the .no-wrap utility class to prevent the menu button from wrapping below the logo on smaller viewports.
<nav class="navbar no-wrap">
<a class="logo" href="#">Kelp UI</a>
<ul>
<li>
<button
command="show-modal"
commandfor="collapsed-nav"
aria-label="Menu"
>
☰
</button>
</li>
</ul>
</nav>Breakpoints
You can use the .hide-above-* and .show-above-* utility classes control which .navbar elements are visible at different viewport sizes.
In this example, the regular menu appears and the collapsible menu button disappears in medium-sized viewports and higher.
<nav class="navbar no-wrap">
<a class="logo" href="#">Kelp UI</a>
<ul class="show-above-m">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="hide-above-m">
<li>
<button
command="show-modal"
commandfor="collapsed-nav"
aria-label="Menu"
>
☰
</button>
</li>
</ul>
</nav>Button Style
If you use the .plain utility class on the <button>, it will automatically receive a negative margin that offsets it’s padding.
This keeps the button aligned with the edge of the .navbar while preserving the tap target size for easier use on touch devices.
<button
command="show-modal"
commandfor="collapsed-nav"
aria-label="Menu"
class="plain"
>
☰
</button>Menu Style
By default, collapse 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.
You can even use Kelp’s layout classes to create multi-column layouts.
For convenience, the .nav-collapse class removes the underline --decoration from all link elements.
<dialog id="collapsed-nav" class="drawer" closedby="any">
<div class="action-header">
<h2>Nav Menu</h2>
<form method="dialog">
<button
class="plain"
aria-label="Close Modal"
>
✕
</button>
</form>
</div>
<div class="action-body nav-collapse">
<div class="grid-auto">
<ul class="list-unstyled stack gap-5xs">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="list-unstyled stack gap-5xs">
<li><a href="#">❤️</a></li>
<li><a href="#">🔍</a></li>
<li><a class="btn secondary size-s" href="#">Join</a></li>
</ul>
</div>
</div>
</dialog>