Menu componentAvailable since EcoComposer 2.2

Menu examples
Default SCSS values
SCSS implementation
HTML implementation

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>