larva modules: mega-menu-item

Available Variants

prototype
  • Parent item
    • mega-menu-item README

    This needs docs!
    Create a README.md in the pattern's directory and add details about using this pattern in markdown.

    mega-menu-item Twig The markup file. 
    <li class="mega-menu-item // mega-menu__parent-list-item {{ mega_menu_item_classes }} " data-collapsible="collapsed" >
	<div class="mega-menu__item-link // {{ mega_menu_item_link_classes }} ">
		{% include "@larva/components/c-link/c-link.twig" with c_link %}

		{% if c_icon %}
			<button class="mega_menu__item-button // {{ mega_menu_item_button_classes }}" data-collapsible-toggle="always-show">
				{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
			</button>
		{% endif %}
	</div>

	<ul class="mega-menu__child-list // {{ mega_menu_child_list_classes }} " data-collapsible-panel="" data-collapsible-breakpoint="mobile-only">
		{% for item in mega_menu_item_children %}
			<li class="mega-menu__child-list-item ">
				{% include "@larva/components/c-link/c-link.twig" with item %}
			</li>
		{% endfor %}
	</ul>
</li>
    mega-menu-item JSON The data object for this pattern. 
    {
	"c_link": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-font-weight-bold lrv-a-font-body-xs lrv-u-text-transform-uppercase",
		"c_link_text": "Parent item",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"mega_menu_item_children": [
		{
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-padding-tb-025 lrv-u-display-block lrv-a-font-body-xs",
			"c_link_text": "Child item",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		{
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-padding-tb-025 lrv-u-display-block lrv-a-font-body-xs",
			"c_link_text": "Child item",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		{
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-padding-tb-025 lrv-u-display-block lrv-a-font-body-xs",
			"c_link_text": "Child item",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		}
	],
	"mega_menu_item_classes": "lrv-a-unstyle-list",
	"mega_menu_item_link_classes": "lrv-u-flex lrv-u-color-black   lrv-u-display-inline-block lrv-u-width-100p",
	"mega_menu_child_list_classes": "lrv-a-unstyle-list lrv-u-padding-t-1 lrv-u-margin-b-125"
}