project objects: o-drop-menu
Available Variants
prototypeo-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
}