The EWC Menu component provides a standardized dropdown menu for Eurostat web applications. It offers a consistent visual identity across Eurostat digital products while allowing for customization to meet specific application needs.
- Supports usage in single page applications
- Highlighting of the currently selected item
- Responsive design that adapts to different screen sizes
- On wide screens, the menu is oriented horizontally, taking up all available space
- On narrow screens, the menu becomes a hamburger icon and opens up vertically along the right border of the viewport
- Automatic display of left/right scroll buttons
- Accessibility compliant
On wide enough screens, menu is displayed horizontally.
Given a narrow viewport, the menu is collapsed/hidden and a hamburger icon is displayed
Given a narrow viewport, the menu is displayed vertically (given a narrow viewport) when opened/expanded
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
| data | MenuItem | set contents of the menu. expects array of objects of type MainMenuItem. Please see "types" and "example of data" below. | ||
| select | String | sets currently selected item. expects an id. | ||
| onSelect | Function | a callback which is called when a menu/submenu item was selected. | ||
| callback signature: myCallback(subMenuId, menuId, isMainMenuItem) | ||||
| isMainMenuItem === true means, a main-menu item was selected. Note: subMenuId === menuId in that case | ||||
| transparentBackground | Bool | if set to "true", the background gradient is not drawn and the background is left transparent. default is false. | ||
| data-ewc-menu-max-lines | Number | labels of menu items don't take up more lines than specified. This implies a minimal width for all or some menu items. default=2. |
type MenuItem = {
id: string
label: string
}
type MainMenuItem = {
item: MenuItem
numberOfCols: number
subMenuItems: MenuItem[]
}
const mainMenuItems =
[
{
item: {
id: 'MyMainMenuItemId',
label: 'Displayed Label',
},
numberOfCols: 2, // optional, default = 1
subMenuItems: [ // can be omitted or empty array
{
id: 'MySubMenuItemId'
label: 'Label for a submenu item'
}
]
}
]
- numberOfCols - In the top-menu only (not when in side menu on narrow widths), up to 4 columns are supported.
npm install @ewc-lib/ewc-dialogImport the component in your application:
// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css"
import "@ewc-lib/ewc-dialog"- "ewc-css-common/custom-props.css" is necessary and downloaded along with ewc-dialog.
- It needs to be imported by the host project because it's not imported by ewc-dialog itself.
There are two examples (actually working sourcecode) on how to use the component.
One is pure vanillaJS, the other using WebPack.
Please see directory usage-example/
By default - out of the box - the menu assumes to have the entire given width available.
In order to allow for content on the right side of the menu, CSS similar to this has to be used:
ewc-menu {
width: calc(100% - 200px);
}
The above code assumes that the lateral content has a width of 200px.
This assures, that the menu displays correctly and behaves as expected. See also detailed explanation below.
This is what it looks like on wide screens to display 3 buttons on the right side of the menu.
Note that in the depicted situation, not all menu items fit the given width, thus automatically displaying an additional button to scroll the menu items.
On narrow screens, by default, the hamburger icon is displayed to the left side of the additional content:
To achieve this, additionally to what's described above (content on the right side of menu), the following CSS is necessary:
@media (max-width:996px) {
#menu-container-row {
flex-direction: row-reverse;
}
ewc-menu {
width:auto;
}
}
Note that the above is demonstrated with working sourcecode in the directory "usage-example/".
Here is a visual example of the HTML elements involved to achieve this.
┌── menu-container-row ────────────────────────────────────────────────────────────────────┐
│ ┌── ewc-menu ────────────────────────────────────────────────┐┌─── btn-container ──────┐ │
│ │ ┌─────────────────┐ ┌────────────┐ ┌────────────────────┐ ││┌──────┐┌──────┐┌──────┐│ │
│ │ │ │ │ │ │ │ │││ ││ ││ ││ │
│ │ │ menu item │ │ menu item │ │ menu item │ │││ Btn ││ Btn ││ Btn ││ │
│ │ │ │ │ │ │ │ │││ ││ ││ ││ │
│ │ └─────────────────┘ └────────────┘ └────────────────────┘ ││└──────┘└──────┘└──────┘│ │
│ └────────────────────────────────────────────────────────────┘└────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────────────────┘
Assumptions:
- buttons are set to an explicit width by the developer (let's say 56px)
- menu-container-row and btn-container are calculated by the browser
- ewc-menu does not have a width set by the developer
Below a certain width, some or all menu items are set to an explicit width, calculated by some dedicated JS. This is done in order to mainain a certain maximal number of rows for menu items and/or to display the buttons for scrolling the menu left/right.
So, ewc-menu grows as wide as it needs to, pushing the btn-container out of the right side of the screen.
To avoid that, the ewc-menu has to be assigned a width by the devloper, similar to this example:
width: calc(100% - calc(3 * 56px));
Note that the above is demonstrated with working sourcecode in the directory "usage-example/".
The component is designed with accessibility in mind:
- Keyboard navigable elements
- Sufficient color contrast
- Screen reader friendly with appropriate ARIA attributes
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
European Union Public License (EUPL)
-
1.1.1-alpha
- improve docu
-
1.1.0-alpha
- respect given total width when calculating menu item width to support content on the side of the menu
- update docu
-
1.0.9-alpha
- option for transparent background
-
1.0.8-alpha
- fix for: Menu labels don't use available width after narrowing the window and then widening it again. The labels stay in 2 lines even though there is enough width available for them to be in just 1 line.
-
1.0.7-alpha
- allow for main menu items without a submenu