Navigtion with ul and li

Hi ,
I want to develop a navigation with combination of ul and li.
I have attached the image that i have to develop in Vaadin.
Please help me out.


How about just using a two tabsheets? See
tabs tab in reindeer demo
for a quite similar looks.

The tabs in the reindeer demo use tables to set each tab row, with table cells for each tab. In doing so, there is no hierarchy for the HTML.

UL’s and LI’s set hierarchy within the HTML, which does a few things…

  • set relationships between parent and child lists which is great for understanding navigation
  • setting importance with for Search Engine Optimization
  • easier customization of the front end.

The reindeer tabs do not allow the first two, and customization is definitely not as easy.

I guess if you are building an internal application, than using the reindeer tabs really doesn’t matter, except the handcuffing to the brittle table in terms of customization. But if you have an external web app, then the top two reasons suggest that the reindeer tabs are not an option.

Looking at the vaadin site, the main navigation is using UL and LI for it’s navigation. How was that done using vaadin? Or is that not produced by vaadin?

The Vaadin site is not implemented with the Vaadin framework but as a normal Liferay site. Some parts of the site are Vaadin applications (typically embedded within one of the pages), but most of the site - including top-level navigation - is not implemented in Vaadin. As noted elsewhere, Vaadin is better suited for building interactive applications than for traditional web sites.

para bailar la bamba se necesita una poca de gracia