Install

Maven

<dependency>
    <groupId>com.vaadin.componentfactory</groupId>
    <artifactId>anchor-nav</artifactId>
</dependency>

Import

import com.vaadin.componentfactory.AnchorNav;
import com.vaadin.componentfactory.AnchorNavSection;

Variants

Initialization

AnchorNav anchorNav = new AnchorNav();
anchorNav.addThemeVariants(AnchorNavVariant.EXPAND_LAST);

Object section

FacetList first = new FacetList();
first.add(new Facet("Person No.", "1234567"));
first.add(new Facet("Date of birth", "15.06.1952"));

FacetList second = new FacetList();
second.add(new Facet("Salutation", "Herr"));
second.add(new Facet("First name", "Max"));
second.add(new Facet("Last name", "Mustermann"));

AnchorNavSection section = new AnchorNavSection(headerText, new BlockLayout(first, second));
Toolbar header = new Toolbar("Person data");
header.add(new Button("Edit"));
section.setSectionHeader(header);
anchorNav.add(section);

List section

Grid<Foo> grid = new Grid<>();
grid.setSelectionMode(SelectionMode.MULTI);
grid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
grid.addColumn(Foo::getStreet).setHeader("Street and number").setSortable(true);
grid.addColumn(Foo::getZipCode).setHeader("Zip code").setSortable(true);
grid.addColumn(Foo::getCity).setHeader("City").setSortable(true);

GridAddon addon = new GridAddon();
addon.setPrimaryActionColumnProvider(new GridItemAction<>("Edit"));
addon.setPrimaryActionIconRenderer(LitRenderer.of("<span theme=\"icon\">edit</span>"));
addon.addItemActionClickEventListener(System.out.println(String.format("On address %s the action %s was clicked", e.getItem().getFullAddress(), e.getAction().getText(e.getItem()))));
addon.attach(grid);
        
AnchorNavSection section = new AnchorNavSection(headerText, grid);
Toolbar header = new Toolbar("Foo list");
header.add(new Button("Delete"));
header.syncLoadingWithGrid(grid);
header.syncSizeWithGrid(grid);
section.setSectionHeader(header);
anchorNav.add(section);