Menu componentAvailable since EcoComposer 2.2
Horizontal menu example :
Vertical menu example with a different style and some submenus :
The default values are :
border-radius : .5rem * theming.$font-size,
block--active-element : true,
horizontal : true,
item--border-radius : 0 .5rem * theming.$font-size 0 0,
margin-top : 0,
margin-bottom : 0,
padding : 1rem * theming.$font-size,
print : false,
menu--background-color : 'menu--background-color',
menu--background-image : 'menu--background-image',
menu--border : 'menu--border',
menu--element--animated-border : true,
menu--element--animated-border-color : 'menu--element--animated-border-color',
menu--element--animated-border-width : .4rem * theming.$font-size,
menu--element--border : 'menu--element--border',
menu--element--border-style : 'menu--element--border-style',
menu--element--border-color : 'menu--element--border-color',
// -- menu states start
// idle state
menu--element--background-color : 'menu--element--background-color',
menu--element--background-image : 'menu--element--background-image',
menu--element--color : 'menu--element--color',
// active state
menu--element--active--background-color : 'menu--element--active--background-color',
menu--element--active--background-image : 'menu--element--active--background-image',
menu--element--active--color : 'menu--element--active--color',
// focus state
menu--element--focus--background-color : 'menu--element--focus--background-color',
menu--element--focus--background-image : 'menu--element--focus--background-image',
menu--element--focus--color : 'menu--element--focus--color',
// focus-visible state
menu--element--focus-visible--box-shadow : 'menu--element--focus-visible--box-shadow',
// hover state
menu--element--hover--background-color : 'menu--element--hover--background-color',
menu--element--hover--background-image : 'menu--element--hover--background-image',
menu--element--hover--color : 'menu--element--hover--color',
// visited state
menu--element--visited--background-color : 'menu--element--visited--background-color',
menu--element--visited--background-image : 'menu--element--visited--background-color',
menu--element--link--visited--color : 'menu--element--link--visited--color',
// menu states end --
// font
menu--font : 'menu--font',
// submenus
submenu--background-color : 'submenu--background-color',
submenu--background-image : 'submenu--background-image',
submenu--border : 'submenu--border',
submenu--element--border : 'submenu--element--border',
submenu--element--border-style : 'submenu--element--border-style',
submenu--element--border-color : 'submenu--element--border-color',
// -- submenu states start
// idle state
submenu--element--background-color : 'submenu--element--background-color',
submenu--element--background-image : 'submenu--element--background-image',
submenu--element--color : 'submenu--element--color',
// active state
submenu--element--active--background-color : 'submenu--element--active--background-color',
submenu--element--active--background-image : 'submenu--element--active--background-image',
submenu--element--active--color : 'submenu--element--active--color',
// focus state
submenu--element--focus--background-color : 'submenu--element--focus--background-color',
submenu--element--focus--background-image : 'submenu--element--focus--background-image',
submenu--element--focus--color : 'submenu--element--focus--color',
// hover state
submenu--element--hover--background-color : 'submenu--element--hover--background-color',
submenu--element--hover--background-image : 'submenu--element--hover--background-image',
submenu--element--hover--color : 'submenu--element--hover--color',
// visited state
submenu--element--visited--background-color : 'submenu--element--visited--background-color',
submenu--element--visited--background-image : 'submenu--element--visited--background-image',
submenu--element--link--visited--color : 'submenu--element--link--visited--color',
// submenu states end --
submenus : null,
suffix : '',
width : 26rem * theming.$font-size,
themes : (
light : (
// menu main properties
default--menu--background-color : null,
default--menu--background-image : linear-gradient(#c6d8df 0%, #bedce8 45%, #c6d8df 100%),
default--menu--border : 1px solid #000,
default--menu--element--animated-border-color : #77a,
default--menu--element--border : 1px solid #000,
default--menu--element--border-style : solid,
default--menu--element--border-color : #000,
// -- menu states start
// idle state
default--menu--element--background-color : null,
default--menu--element--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--menu--element--color : null,
// active state
default--menu--element--active--background-color : null,
default--menu--element--active--background-image : linear-gradient(45deg, #86acbb, #bedce8),
default--menu--element--active--color : #44a,
// focus state
default--menu--element--focus--background-color : null,
default--menu--element--focus--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--menu--element--focus--color : #44a,
// focus-visible state
default--menu--element--focus-visible--box-shadow : inset 0 0 .3rem * theming.$font-size .1rem * theming.$font-size,
// hover state
default--menu--element--hover--background-color : null,
default--menu--element--hover--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--menu--element--hover--color : #66c,
// visited state
default--menu--element--visited--background-color : null,
default--menu--element--visited--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--menu--element--link--visited--color : null,
// menu states end --
default--menu--font : '#{2rem * theming.$font-size} system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif',
// submenu main properties
default--submenu--background-color : null,
default--submenu--background-image : linear-gradient(#c6d8df 0%, #bedce8 45%, #c6d8df 100%),
default--submenu--border : 1px solid #000,
default--submenu--element--border : 1px solid #000,
default--submenu--element--border-style : solid,
default--submenu--element--border-color : #000,
// -- submenu states start
// idle state
default--submenu--element--background-color : null,
default--submenu--element--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--submenu--element--color : null,
// active state
default--submenu--element-active--background-color : null,
default--submenu--element-active--background-image : linear-gradient(45deg, #86acbb, #bedce8),
default--submenu--element-active--color : null,
// focus state
default--submenu--element-focus--background-color : null,
default--submenu--element-focus--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--submenu--element-focus--color : null,
// hover state
default--submenu--element-hover--background-color : null,
default--submenu--element-hover--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--submenu--element-hover--color : null,
// visited state
default--submenu--element--visited--background-color : null,
default--submenu--element--visited--background-image : linear-gradient(45deg, #c6d8df, #bedce8),
default--submenu--element--link--visited--color : null
// submenu states end --
),
dark : (
// menu main properties
default--menu--background-color : null,
default--menu--background-image : linear-gradient(#3e5e6a, #517a8a),
default--menu--border : 1px solid #000,
menu--element--animated-border-color : #77a,
default--menu--element--border : 1px solid #000,
default--menu--element--border-style : solid,
default--menu--element--border-color : #000,
// -- menu states start
// idle state
default--menu--element--background-color : null,
default--menu--element--background-image : linear-gradient(45deg, #1c2427 0%, #18252a 45%, #1c2427 100%),
default--menu--element--color : #ccc,
// active state
default--menu--element-active--background-color : null,
default--menu--element-active--background-image : linear-gradient(45deg, #1c2427 0%, #2b414a 45%, #1c2427 100%),
default--menu--element-active--color : null,
// focus state
default--menu--element-focus--background-color : null,
default--menu--element-focus--background-image : linear-gradient(45deg, #185b77 0%, #204756 45%, #185b77 100%),
default--menu--element-focus--color : null,
// focus-visible state
default--menu--element-focus-visible--box-shadow : inset 0 0 .3rem * theming.$font-size .1rem * theming.$font-size,
// hover state
default--menu--element-hover--background-color : null,
default--menu--element-hover--background-image : linear-gradient(45deg, #1c2427 0%, #3d7085 45%, #1c2427 100%),
default--menu--element-hover--color : null,
// visited state
default--menu--element--visited--background-color : null,
default--menu--element--visited--background-image : linear-gradient(45deg, #1c2427 0%, #18252a 45%, #1c2427 100%),
default--menu--element--link--visited--color : #ccc,
// menu states end --
default--menu--font : '#{2rem * theming.$font-size} system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif',
// submenu main properties
default--submenu--background-color : null,
default--submenu--background-image : linear-gradient(#3e5e6a, #517a8a),
default--submenu--border : 1px solid #000,
default--submenu--element--border : 1px solid #000,
default--submenu--element--border-style : solid,
default--submenu--element--border-color : #000,
// -- submenu states start
// idle state
default--submenu--element--background-color : null,
default--submenu--element--background-image : linear-gradient(45deg, #313f44 0%, #2b424a 45%, #313f44 100%),
default--submenu--element--color : #ccc,
// active state
default--submenu--element-active--background-color : null,
default--submenu--element-active--background-image : linear-gradient(45deg, #1c2427 0%, #2b414a 45%, #1c2427 100%),
default--submenu--element-active--color : #44a,
// focus state
default--submenu--element-focus--background-color : null,
default--submenu--element-focus--background-image : linear-gradient(45deg, #185b77 0%, #204756 45%, #185b77 100%),
default--submenu--element-focus--color : #44a,
// hover state
default--submenu--element-hover--background-color : null,
default--submenu--element-hover--background-image : linear-gradient(45deg, #1c2427 0%, #3d7085 45%, #1c2427 100%),
default--submenu--element-hover--color : #44a,
// visited state
default--submenu--element--visited--background-color : null,
default--submenu--element--visited--background-image : linear-gradient(45deg, #313f44 0%, #2b424a 45%, #313f44 100%),
default--submenu--element--link--visited--color : #ccc
// submenu states end --
)
)
We can implement it that way :
@include menu.init();
@include menu.create(
(
'themes' : $themes
)
);
@include menu.create(
(
'border' : null,
'suffix' : '-2',
'themes' : $themes
)
);
We can implement it that way :
<ul class="menu-vertical menu--container" role=menu>
<li class="menu-vertical menu--container--item has-submenu" tabindex role=menuitem>
<p class="menu-vertical menu--container--item--paragraph" aria-haspopup=true>⌚ Time tracking</p>
<ul class="menu-vertical menu--container" aria-hidden=true aria-expanded=false aria-label="First submenu">
<li class="menu-vertical menu--container--item" role=menuitem>First submenu item</li>
<li class="menu-vertical menu--container--item" role=menuitem>Second submenu item</li>
<li class="menu-vertical menu--container--item has-submenu" role=menuitem>
<p class="menu-vertical menu--container--item--paragraph" aria-haspopup=true>Third submenu item</p>
<ul class="menu-vertical menu--container" aria-hidden=true aria-expanded=false
aria-label="First sub...submenu">
<li class="menu-vertical menu--container--item" role=menuitem>First sub...submenu item</li>
<li class="menu-vertical menu--container--item" role=menuitem>Second sub...submenu item</li>
<li class="menu-vertical menu--container--item" role=menuitem>Third sub...submenu item</li>
</ul>
</li>
</ul>
</li>
<li class="menu-vertical menu--container--item has-submenu" tabindex role=menuitem>
<p class="menu-vertical menu--container--item--paragraph" aria-haspopup=true><span class=icon>🎯</span>
Objectives</p>
<ul class="menu-vertical menu--container" aria-hidden=true aria-expanded=false aria-label="Second submenu">
<li class="menu-vertical menu--container--item" role=menuitem>2nd - First submenu item</li>
<li class="menu-vertical menu--container--item" role=menuitem>2nd - Second submenu item</li>
<li class="menu-vertical menu--container--item" role=menuitem>2nd - Third submenu item</li>
</ul>
</li>
<li class="menu-vertical menu--container--item menu--container--item-active" tabindex
role=menuitem><a href=# class="menu-vertical menu--container--item--link">📞 Contacts - active</a></li>
<li class="menu-vertical menu--container--item" tabindex role=menuitem>⚙ Settings</li>
</ul>