Menu

The <auro-menu> element provides a list of options for a user to select from.

A list of options is created within the <slot> of the <auro-menu> element by using the <auro-menuoption> element to define options. Use a standard <hr> element to create dividers within the list of options.

The <auro-menu> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <auro-menu> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.

auro-menu use cases

The <auro-menu> element should be used in situations where users may:

• A user needs to select one option from a list of options.

Example(s)

Default

A basic auro-menu element with nested auro-menuoption elements to generate a list.

<auro-menu>
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>