project objects: o-drop-menu

Available Variants

prototype
o-drop-menu README

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

o-drop-menu Twig The markup file.
<div class="o-drop-menu {{ o_drop_menu_classes }}" data-collapsible="collapsed" {{ o_drop_data_attr }}
	{% if o_drop_data_attr %}
		{{ o_drop_data_attr }}
	{% endif %}>
	<a class="o-drop-menu__toggle {{ o_drop_menu_toggle_classes }}" href="#" data-collapsible-toggle="always-show">
		{% if c_span %}
			{% include "@larva/components/c-span/c-span.twig" with c_span %}
		{% endif %}

		{% if o_icon_button %}
			{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button %}
		{% endif %}
	</a>

	<div class="o-drop-menu__list {{ o_drop_menu_list_classes }}" data-collapsible-panel>
		{% if c_span_user %}
			{% include "@larva/components/c-span/c-span.twig" with c_span_user %}
		{% endif %}

		{% if c_tagline %}
			{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
		{% endif %}

		{% if o_nav %}
			{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
		{% endif %}
	</div>
</div>
o-drop-menu JSON The data object for this pattern.
{
	"o_drop_menu_classes": "lrv-a-glue-parent",
	"o_drop_data_attr": false,
	"o_drop_menu_toggle_classes": "js-drop-menu__toggle",
	"o_drop_menu_list_classes": "js-drop-menu__tooltip",
	"c_span": {
		"modifier_class": "",
		"c_span_classes": "lrv-u-whitespace-nowrap",
		"c_span_text": "Label Text",
		"c_span_url": "",
		"c_span_link_classes": ""
	},
	"o_nav": {
		"modifier_class": "",
		"o_nav_classes": "",
		"o_nav_title_text": "",
		"o_nav_title_id_attr": "",
		"o_nav_title_classes": "",
		"o_nav_aria_labelledby_attr": "",
		"o_nav_screen_reader_id_attr": "optional-screen-reader",
		"o_nav_screen_reader_text": "optional screen reader",
		"o_nav_list_classes": "lrv-a-unstyle-list",
		"o_nav_list_item_classes": "",
		"o_nav_list_items": [
			{
				"modifier_class": "",
				"c_link_classes": "lrv-a-unstyle-link",
				"c_link_text": "A plain text link",
				"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",
				"c_link_text": "A plain text link",
				"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",
				"c_link_text": "A plain text link",
				"c_link_url": "#",
				"c_link_rel_attr": false,
				"c_link_aria_label_attr": false,
				"c_link_target_attr": false
			}
		],
		"o_nav_list_labelledby_attr": ""
	},
	"c_tagline": false,
	"c_link": false,
	"o_icon_button": false
}