Menu

ComponentNavigation Source

A hamburger menu, for when a header runs out of room. Its three lines fold into a cross as it opens, and what it holds drops in one after another. It closes on Escape, a click anywhere else, tabbing out, or choosing a link or button inside it; the arrow keys, Home and End move between what's inside, and opening it from the keyboard moves straight to the first. Links inside are styled for you, and whichever has aria-current="page" is marked.

Menu(props: MenuProps): Element

Props

labeloptionalstring

What the button is called for screen readers. Defaults to "Menu".

alignoptional"start" | "end"

Which edge of the button the menu lines up with. Defaults to end, for a menu at the right of a header.

classoptionalstring

childrenrequiredComponentChildren

What the menu holds: usually links, styled for you, with aria-current="page" marking the one for the page being read.