Menu item

A menu item is a plain text link in the dropdown that opens from the Menu button below 1024px. It is 44px tall with 12px of side padding. It uses the Body style, so the type steps with the breakpoint: 15/22 on mobile and 16/24 on tablet. On desktop the same links sit in the side nav.

States

Default: text on the page surface.
Hover: the tertiary hover fill.
Focus: the 4px focus ring with a 2px gap.
Current: Body SemiBold, a 4px bar on the left edge (interactive/link/nav/indicator), and aria-current="page".

Breakpoints

The frames below are fixed widths, so each shows its own breakpoint on any screen. Hover and focus work in the frames.

Mobile, 375px wide: 15/22.

Tablet, 768px wide: 16/24. The dropdown panel is at most 400px wide.

Using the menu item

Do

Use the page title as the label.
Mark the current page with aria-current="page" as well as the bar.

Don't

Set a font size on the link. The Body style steps by itself.
Make the item shorter than 44px.

Up next

Form field

A 56px field with the label inside it and a rule along the bottom.

Continue to Form field

Back to Link