Skip to main content

Menu

A menu is a self-contained list of actionable choices.

Code documentation

Web

Anatomy

The menu component is made up of two elements.

  1. Container
  2. Default slot
Anatomy diagram numbering two elements of a list item.

Behavior

Height

Menus grow in height to accommodate their contents.

Two menus are compared side-by-side. The height of the left menu hugs against three list items. The height of the right menu grows to hug against five list items.

Padding

By default, menus have no padding. Padding can either be defined within custom slot layouts or added to any of the slots via component tokens. The component tokens recognize CSS shorthand, so specifying one value will define all of the sides with the same value whereas defining a component spacing token with four values (or tokens) will override each side discretely.

Two menus are compared side-by-side. The default slot of the left menu fills the entire width of the menu container and includes padding equal to the radius of container corners. The default slot of the right menu includes equidistant padding between it and the menu container.