How can I build a similar header like that one on the Vaadin-homepage?

General
1

Hi,

I’m absolutly excited about the great design of the Vaadin-homepage. For that reason, I would like to build a similar header and footer. Especially, I’m interested in the drop-down-menus like you can see by clicking on e.g. “Platform”. I was wondering if you could tell me how to build this with Vaadin 8? Am I supposed to upgrade to Vaadin 10? Which components should I use? Is it necessary to add my own CSS for building the drop-down-menus as you can see in “Platform”?

2

The current vaadin.com has been built mostly with Vaadin 10 taking advantage of [PolymerTemplate]
(https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-basic.html). The header and footer have been built as Polymer based web components with HTML, CSS and JavaScript so the visual appearance and functionality has been implemented mainly with frontend technologies (not using Java API except for passing some data and handling login/registration and such).

We have a website team where some people focus on backend code (Java) and some mostly on frontend code (HTML, CSS, JS) so this kind of separation works really well for us.

I’m mostly a frontend developer myself though so I can’t comment much on how this could be done if you would like to implement something similar without using Polymer templates (if you prefer to write mainly Java code).

3

Thank you very much for your fast feedback. It was very helpful!