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.

Figma

Custom layouts

The menu component is designed to accommodate custom content and layouts within its default slot. To make the most of this structure, we recommend adding relevant menu “micro-layouts”. You can then swap the placeholder with one of these layouts to create a custom menu. If that particular menu will be used in multiple places throughout your UI, you can then componentize that specific menu with the content in place so it can be consistently reused.

Padding

Padding may be applied to each individual side of the default slot to accommodate custom layout considerations. These can be set on the menu-default-wrapper layer.