larva modules: navigation-item

Available Variants

prototype

  • Parent item

    • navigation-item README

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

    navigation-item Twig The markup file. 
    <li class="navigaiton-item // navigaiton__parent-list-item {{ parent_list_item_classes }}">
	<h3 id="{{ navigation_item_heading_id_attr }}" class="navigaiton-item-heading {{ parent_list_item_heading_classes }}">
		{% include "@larva/components/c-link/c-link.twig" with c_link %}

		<button class="{{ toggle_button_classes }}">
			<span class="lrv-a-icon-after lrv-a-icon-arrow-down a-icon-down-arrow-color-wild-strawberry">
				<span class="lrv-a-screen-reader-only">
					{{navigation_item_toggle_screen_reader_text}}
				</span>
			</span>
		</button>
	</h3>

	<ul class="navigaiton__child-list // {{ navigation_child_list_classes }}"
		{% if navigation_aria_labelledby_attr %}
			aria-labelledby="{{ navigation_aria_labelledby_attr }}"
		{% endif %}
	>
		{% for item in navigation_item_children %}
			<li class="navigaiton__child-list-item // lrv-u-margin-tb-025">
				{% include "@larva/components/c-link/c-link.twig" with item %}
			</li>
		{% endfor %}
	</ul>
</li>
    navigation-item JSON The data object for this pattern. 
    {
	"c_link": {
		"modifier_class": "",
		"c_link_classes": "lrv-u-color-brand-primary:hover lrv-u-color-currentColor lrv-u-text-transform-uppercase lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block",
		"c_link_text": "Parent item",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"navigation_item_heading_id_attr": "",
	"navigation_aria_labelledby_attr": "",
	"navigation_item_toggle_screen_reader_text": "Expand the sub menu",
	"toggle_button_classes": "lrv-a-unstyle-button lrv-u-margin-l-auto lrv-u-padding-a-025 lrv-u-display-none",
	"navigation_item_children": [
		{
			"modifier_class": "",
			"c_link_classes": "lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block lrv-u-color-currentColor",
			"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-u-color-brand-primary:hover lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block lrv-u-color-currentColor",
			"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-u-color-brand-primary:hover lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block lrv-u-color-currentColor",
			"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-u-color-brand-primary:hover lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block lrv-u-color-currentColor",
			"c_link_text": "Child item",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		}
	],
	"navigation_child_list_classes": "lrv-u-display-none lrv-a-unstyle-list lrv-a-glue lrv-a-glue--l-0 lrv-u-width-200 lrv-u-background-color-white lrv-u-overflow-auto lrv-u-border-a-1 lrv-u-padding-lr-050 lrv-u-padding-tb-025 lrv-u-border-color-brand-accent",
	"navigation_parent_list_classes": "lrv-u-flex lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025",
	"parent_list_item_classes": "",
	"parent_list_item_heading_classes": "lrv-u-flex lrv-u-align-items-center lrv-u-color-currentColor"
}