larva modules: navigation

Available Variants

prototype

All

navigation README

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

navigation Twig The markup file. 
<div class="navigation-menu // lrv-js-MobileHeightToggle {{ navigation_classes }}">

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

	<ul class="navigation-content // {{ nav_content_classes }}">

		{% for item in navigation_items %}
			{% include "@larva/modules/navigation-item/navigation-item.twig" with item %}
		{% endfor %}

	</ul>
</div>
navigation JSON The data object for this pattern. 
{
	"c_heading": {
		"c_heading_classes": "lrv-a-glue-parent has-text-color lrv-u-width-100p lrv-u-border-a-1 lrv-js-MobileHeightToggle-trigger lrv-u-padding-tb-050 lrv-u-justify-content-center lrv-u-text-transform-uppercase  lrv-a-icon-after a-icon-after-caret-down a-icon-height-8 a-icon-width-13",
		"c_heading_id_attr": "section-heading",
		"c_heading_text": "All",
		"c_heading_url": "",
		"c_heading_link_classes": "",
		"c_heading_outer": false,
		"c_heading_outer_classes": "",
		"c_heading_is_primary_heading": false
	},
	"navigation_classes": "",
	"navigation_items": [
		{
			"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-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-justify-content-center lrv-u-width-100p@mobile-max lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025",
			"parent_list_item_classes": "lrv-u-width-100p@mobile-max lrv-u-justify-content-center",
			"parent_list_item_heading_classes": "lrv-u-flex lrv-u-justify-content-center lrv-u-padding-tb-050"
		},
		{
			"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-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-justify-content-center lrv-u-width-100p@mobile-max lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025",
			"parent_list_item_classes": "lrv-u-width-100p@mobile-max lrv-u-justify-content-center",
			"parent_list_item_heading_classes": "lrv-u-flex lrv-u-justify-content-center lrv-u-padding-tb-050"
		},
		{
			"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-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-justify-content-center lrv-u-width-100p@mobile-max lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025",
			"parent_list_item_classes": "lrv-u-width-100p@mobile-max lrv-u-justify-content-center",
			"parent_list_item_heading_classes": "lrv-u-flex lrv-u-justify-content-center lrv-u-padding-tb-050"
		},
		{
			"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-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-justify-content-center lrv-u-width-100p@mobile-max lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025",
			"parent_list_item_classes": "lrv-u-width-100p@mobile-max lrv-u-justify-content-center",
			"parent_list_item_heading_classes": "lrv-u-flex lrv-u-justify-content-center lrv-u-padding-tb-050"
		}
	],
	"main_toggle_button_classes": "lrv-a-hidden@tablet",
	"nav_content_classes": "lrv-js-MobileHeightToggle-target a-children-border-color-current lrv-a-space-children-horizontal@tablet a-space-children--350 lrv-u-border-b-1@mobile-max lrv-a-children-border-vertical@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-align-items-center lrv-a-unstyle-list lrv-u-flex lrv-u-justify-content-center lrv-u-flex-wrap-wrap"
}