See the Menu
component in Garden's
package for the latest updates.
component classes are used to style menus.
Menus typically originate from a control (i.e. a
<select> dropdown, or
button). The basic BEM structure is
.c-menu__item. A separator may be added between menu items using
.c-menu__separator. The canonical HTML below
illustrates a menu of options vs. a menu of navigation items.
Each menu connected with the buttons below is hidden
and oriented with respect to a relatively positioned container. When a
button is clicked, the
.is-open class is
added. This class applies subtle easing animation to the menu and it's
.c-arrow (depending on the
indicated position and direction). When the menu is subsequently
dismissed, it eases out with a quick fade to give the user a sense of
successful execution on the selected item.
Use the main settings menu to modify styling for the menus displayed throughout the page.
- Toggle "RTL" to add the
- Toggle "Custom" to view the
- Toggle "Size" to apply
Menu Item Modifications
Menu Item State
By default, a menu will expand to accommodate the width
of its items. Override the menu's
to increase the container size. Overriding
can force longer items to wrap. The override for
is a bit different. In order for the menu to support its optional
.c-arrow treatment, it must not hide overflow content.
The solution is to apply both
overflow-y: auto to a child
<div> that contains the menu items to scroll. See the
source code for the following menu examples for details.