Menu

Updated on 20 June 2018

Docs are work in progress, check open issues and see how you can help!

Menu component contains list of possible actions and appears only after specific trigger — Button click, Input click or other event.

In Input case, we call this menu — Dropdown Menu, however, in the case, when menu is opened in full-screen similar to Modal, we call it — Regular Menu.

Menu component consists of:

  • Menu wrapper responsible for dark background in Full-screen style
  • Menu Content — Wrapper containing whole content of Menu
  • Menu Label - Explainer of Menu functionality. For this, we use narrow style Label.
  • Menu Item — single or multiple items, which represent the content of Menu. Here we use narrow style Cell components.

By default, Cell uses body for display of information and title for selected option, but, there might be custom cases, where data can be displayed several ways.

Pseudo-code:

<menu>
  <menu-content>
    <menu-label>
      <label title="Label" style="narrow">
    </menu-label>
    <menu-item>
      <cell body="Option 1" style="narrow">
    </menu-item>
    <menu-item selected>
      <cell title="Option 2" style="narrow">
    </menu-item>
  </menu-content>
</menu>
Option 1
Option 2

Width

Parent

Parent width fills the full width of parent container. By default, Menu uses content width and it’s width is proportional to its content.

Edit Profile
Share
Cancel

Style

Fullscreen

Similar way as in Modal, Full-screen fills whole parent container with dark background, while centering Menu in the center of the screen.

default
My Profile
Giedrius Jaloveckas
default
My Closet
24 Items
default
Wallet
$9.99
default
Settings
default
Log Out

Specifications

// Base

$menu-minimum-width                     : unit(36);
$menu-vertical-padding                  : unit(2);
$menu-border-radius                     : radius(default);
$menu-background-color                  : palette(cg9);

$menu-shadow                            : 'lifted';
$menu-default-text-type                 : 'body';
$menu-selected-default-text-type        : 'title';

// States

$menu-focused-darkness-unit             : 0.02;
$menu-clicked-darkness-unit             : ($menu-focused-darkness-unit * 2);

$menu-focused-background-color          : rgba(palette(cg1), $menu-focused-darkness-unit);
$menu-clicked-background-color          : rgba(palette(cg1), $menu-clicked-darkness-unit);

// Styles

$menu-fullscreen-horizontal-padding      : unit(12);
$menu-fullscreen-background-color        : rgba(palette(cg1), 0.48);

API

name type default
style default / fullscreen default
width content / parent content