HamburgerMenu

A site's main links on a small screen: a button whose bars turn into an X and open a full-screen menu over the page.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { HamburgerMenu } from '@kerf-js/veneer'export function HamburgerSite() {  const at = state('#home')  return (    <header      onClick={follow(at)}      style="display:flex;justify-content:space-between"    >      <strong>Acme</strong>      <HamburgerMenu        label="Site"        links={LINKS}        current={at.value}        brand={<strong>Acme</strong>}      />    </header>  )}const follow =  (at: { value: string }) => (e: MouseEvent) => {    const a = (e.target as Element).closest?.('a')    if (!a) return    e.preventDefault()    at.value = a.getAttribute('href') ?? at.value  }const LINKS = [  { href: '#home', label: 'Home' },  { href: '#pricing', label: 'Pricing' },  { href: '#docs', label: 'Docs' },  { href: '#blog', label: 'Blog' },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { HamburgerMenu } from '@kerf-js/veneer'

When to use

Use it for

A site's top links on a phone, where they no longer fit in the header
Every page of the site, docs pages included: the top links live here on a phone

Reach for something else

SideNav, when the links are one section's pages, like a component list. On a docs page use both: HamburgerMenu for the site, SideNav for the section
Drawer, when the panel holds extra content or tools, not links
Menu, when the items run actions rather than go to pages

Accessibility

EnterorSpace: Opens the menu from the button
Tab: Moves between links; focus stays inside the open menu
Escape: Closes the menu

The button has aria-expanded and aria-controls, and label names it.
The open menu is a modal dialog: focus moves into it, stays inside, and goes back to the button when it closes.
The current page's link has aria-current="page".
With reduced motion the menu fades instead of growing.

API Reference

Prop	Type	Default	Description
`label`	`string`	`'Menu'`	Names the button and the menu. Default `Menu`.
`open`	`State<boolean>`	—	A `state(boolean)` to open or close the menu from outside.
`links`	`HamburgerLink[]`	—	The main links, shown large: `href` and `label`.
`current`	`string`	—	The current page's `href`. Its link is marked.
`brand`	`unknown`	—	Shown at the top left of the open menu, usually the site's logo.
`children`	`unknown`	—	Anything under the links, such as a footer. A link here closes the menu too.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="button"] [data-part="head"]

headbrandclosebodylinks

RelatedSide nav Nav Drawer