On This Page
The typical menu bar.
- Fluent
- Declarative
MenuBar.builder()
.options(List.of(
new RouteLink("/fluent-app/nested-apps/left/home", "Home"),
new RouteLink("/fluent-app/nested-apps/left/page1", "Page 1"),
(Actionable) new Menu("Submenu", List.of(
new RouteLink("/fluent-app/nested-apps/left/home", "Home"),
new RouteLink("/fluent-app/nested-apps/left/page1", "Page 1")
))
))
.build()
copyTBD
Available properties
This is the list of available properties for a context menu:
| Property | Description | Notes |
|---|---|---|
| id | id for this component | |
| cssClasses | list of css classes | content of the css attribute |
| style | inline style attributes | content of the style attribute |
| options | list of menu options, as Actionables |
And above is the list of classes implementing the Actionable interface, and their properties.
Common properties for all Actionables
These properties are common to all the menu options
| Property | Description | Notes |
|---|---|---|
| label | text to show. Only if no component is supplied | |
| selected | if this options must appear as checked | |
| component | any component to be displayed instead of label | |
| className | any css class name | |
| disabled | if this option must appear as disabled | |
| disabledOnClick | if this option must be disabled on click | |
| itemData | any object. It will travel back to the backend, if this option is selected |
RouteLink
Use it for taking the user to a concrete route
| Property | Description | Notes |
|---|---|---|
| route | route to navigate to | |
| target | any of Top, Parent |
MenuSeparator
The divider has no properties. Just draws an horizontal line.
Menu
| Property | Description | Notes |
|---|---|---|
| submenu | a list of Actionables (the menu options) |
ContentLink
| Property | Description | Notes |
|---|---|---|
| componentSupplier | a component supplier |
You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/menu-bar