Skip to main content
Contact us

Menu

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

Figma

Storybook

Anatomy

The menu component is made up of two elements.

  1. Container
  2. Default slot

Behavior

Height

Menus grow in height to accommodate their contents.

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.

Component tokens

The following component tokens are available for customizing the menu component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

  • jh-menu-color-text
    The menu text color.
    Default value
    jh-color-content-primary-enabled
    Computed value
    rgb(42, 44, 46)
  • jh-menu-color-background
    The menu container background-color.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)

Border

  • jh-menu-border-radius
    The menu border-radius.
    Default value
    jh-border-radius-200
    Computed value
    8px

Shadow

  • jh-menu-shadow
    The menu box-shadow.
    Default value
    jh-shadow-300
    Computed value
    0 12px 18px 0 rgba(0, 0, 0, 0.3), 0 6px 6px 0 rgba(0, 0, 0, 0.1)

Space

  • jh-menu-space-padding
    The menu container padding.
    Default value
    jh-space-200 0
    Computed value
    8px 0

Other

  • jh-menu-z-index
    The z-index value.
    Default value
    jh-z-index-positive-1000
    Computed value
    1000