larva objects: o-nav.horizontal

Available Variants

horizontal prototype
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. 
<nav class="o-nav {{ modifier_class }} {{ o_nav_classes }}">

	{% if o_nav_title_text %}
		<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_id_attr %}
		<ul class="o-nav__list {{ o_nav_list_classes }}" aria-labelledby="{{ o_nav_title_id_attr }}">
	{% else %}
		<ul class="o-nav__list {{ o_nav_list_classes }}">
	{% endif %}
		{% if o_nav_is_subscription %}
			<li class="a-subscription-footer-nav__list-item {{ o_nav_list_item_classes }}">
				<div id="pmc-piano-footer-button" class="a-subscription-footer-nav__subscriber-link js-subscription-footer-subscribe-link lrv-u-width-75p lrv-u-width-100p@mobile-max js-subscription-login-link"></div>
			</li>
			{% for item in o_nav_list_items %}
				<li class="a-subscription-footer-nav__list-item {{ o_nav_list_item_classes }}">
					{% include "@larva/components/c-link/c-link.twig" with item %}
				</li>
			{% endfor %}
		{% else %}
			{% 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 %}
		{% endif %}
	</ul>
</nav>
o-nav.horizontal JSON The data object for this pattern. 
{
	"modifier_class": "",
	"o_nav_classes": "lrv-u-flex",
	"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 lrv-u-flex lrv-a-space-children-horizontal lrv-a-space-children--1 lrv-u-align-items-center lrv-u-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": ""
}