larva objects: o-nav
optional screen reader
o-nav README
o-nav is an object with a nav element containing an unordered list with list items in a for loop that contain an instance of c-link. It contains an optional h4 list title. o-nav is useful for menus with several items, and the ability to apply utilities to all lis inside the loop with a single key can useful.
In general, o-nav should be used for internal site links. It can be adapted to work with the JS pattern MobileHeightToggle. See the footer-menus module for an example.
o-nav Twig The markup file.
{% if o_nav_screen_reader_text %}
<h2 id="{{ o_nav_screen_reader_id_attr }}" class="lrv-a-screen-reader-only">
{{ o_nav_screen_reader_text }}
</h2>
{% endif %}
<nav class="o-nav {{ modifier_class }} {{ o_nav_classes }}" data-dropdown="{{ o_nav_data_attributes }}"
{% if o_nav_title_id_attr %}
aria-label="{{ o_nav_title_id_attr }}"
{% endif %}
{% if o_nav_aria_labelledby_attr %}
aria-labelledby="{{ o_nav_aria_labelledby_attr }}"
{% endif %}
{% if o_nav_tab_index_attr %}
tabindex="{{ o_nav_tab_index_attr_val }}"
{% endif %}
>
{% if o_nav_title_text %}
{% if o_nav_title_outer %}
<div class="o-nav__title-outer {{ o_nav_title_outer_classes }}">
{% endif %}
{% if o_nav_tag_text %}
<{{ o_nav_tag_text }} id="{{ o_nav_title_id_attr }}" class="o-nav__title {{ o_nav_title_classes }}">{{ o_nav_title_text }}</{{ o_nav_tag_text }}>
{% else %}
<h4 id="{{ o_nav_title_id_attr }}" class="o-nav__title {{ o_nav_title_classes }}">{{ o_nav_title_text }}</h4>
{% endif %}
{% if o_nav_title_outer %}
</div>
{% endif %}
{% endif %}
<ul class="o-nav__list {{ o_nav_list_classes }}"
{% if o_nav_list_labelledby_attr %}
aria-labelledby="{{ o_nav_list_labelledby_attr }}"
{% endif %}
>
{% for item in o_nav_list_items %}
<li class="o-nav__list-item {{ o_nav_list_item_classes }}">
{% include "@larva/components/c-link/c-link.twig" with item %}
</li>
{% endfor %}
</ul>
</nav>
o-nav JSON The data object for this pattern.
{
"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": ""
}