4.1.2 • Published 2 months ago
@ecl/twig-component-menu v4.1.2
ECL Menu
npm package: @ecl/twig-component-menu
npm install --save @ecl/twig-component-menu
Parameters
- "id" (string) (default: random): Unique id
- "title" (string) (default: ''): Title of the menu (displayed on mobile)
- "toggle": (associative array) (default: {}): Toggle (hambrger) link, using ECL Link structure
- "close": (associative array) (default: {}): Close button, using ECL Button structure
- "back_label" (string): (default: ''): Back button label
- "icon_path" (string) (default: ''): Path to the icon sprite
- "items": (array) (default: []): The menu items - format: [ { "label": (string) (default: '') "path": (string) (default: '') "is_current": (boolean) (optional), "external": (boolean) (optional), "trigger_aria_label" (string), "extra_attributes" (optional) (array) "children": (associative array) (optional): { "label": (string) (default: '') "path": (string) (default: '') "is_current": (boolean) (optional), "external": (boolean) "extra_attributes" (optional) (array) } } ],
- "max_lines": (int) (default: 2): Number of lines for each first level item label. Set it to zero to remove this behavior
- "site_name" (string) (default: ''): Name of the website (used only on mobile)
- "cta_link" (optional) (default: {}): Call to action link compatible with ECL Link component structure (used only on mobile)
- "menu_link" (string) (default: ''): Href attribute of the menu toggler
- "button_previous_label" (string) (default: ''): Label for the button to display previous items, in case of overflow (for screen readers)
- "button_next_label" (string) (default: ''): Label for the button to display next items, in case of overflow (for screen readers)
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
- "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
- "name" (string) Attribute name, eg. 'data-test'
- "value" (optional) (string) Attribute value, eg: 'data-test-1'
Example:
{% include '@ecl/menu/menu.html.twig' with {
title: 'Menu',
toggle: {
link: {
label: 'Menu',
path: exampleLink,
},
icon: [
{
path: '/icons.svg',
name: 'hamburger',
size: 'm',
},
{
path: '/icons.svg',
name: 'close',
size: 'm',
}
],
},
close: {
label: 'Close',
icon: {
path: '/icons.svg',
name: 'close',
size: 'm',
},
hide_label: true,
},
back_label: 'Back',
icon_path: '/icons.svg',
menu_link: './example.com',
items: [
{
label: "Menu item",
path: "example",
is_current: false,
children: [
{
label: "Item 1.1",
path: "/example"
},
...
],
},
...
],
extra_classes: "ecl-menu-extra-class,
extra_attributes: [
{
name:"data-ecl-menu",
},
...
]
} %}
4.1.2
2 months ago
4.1.0
2 months ago
4.1.1
2 months ago
4.0.2
3 months ago
4.0.1
3 months ago
4.0.0
4 months ago
4.0.0-beta-3
4 months ago
4.0.0-beta-2
4 months ago
4.0.0-beta-1
4 months ago
3.13.0
5 months ago
3.12.1
6 months ago
3.12.0
6 months ago
3.9.1
11 months ago
3.9.0
11 months ago
3.8.5
11 months ago
3.11.0
8 months ago
3.10.0
9 months ago
3.11.1
7 months ago
3.8.4
1 year ago
3.8.3
1 year ago
3.8.2
1 year ago
3.8.1
1 year ago
3.8.0
1 year ago
3.7.1
1 year ago
3.7.0
1 year ago
3.6.0
2 years ago
3.5.1
2 years ago
3.4.2
2 years ago
3.5.0
2 years ago
3.4.0
2 years ago
3.3.4
2 years ago
3.3.3
2 years ago
3.4.1
2 years ago
3.3.1
2 years ago
3.3.0
2 years ago
3.3.2
2 years ago
3.2.4
2 years ago
3.2.2
2 years ago
3.2.1
2 years ago
3.2.0
2 years ago
3.2.3
2 years ago
3.1.3
3 years ago
3.1.2
3 years ago
3.1.1
3 years ago
3.1.0
3 years ago
3.0.3
3 years ago
3.0.2
3 years ago
3.0.1
3 years ago
3.0.0
3 years ago
3.0.0-beta.2
3 years ago
3.0.0-beta.1
3 years ago
3.0.0-alpha.1
3 years ago