# Object Page

## Component nesting

- Vertical Layout
    - Breadcumbs
    - Details
        - Floating layout with Key Value Facets
    - Anchor Nav
        - Single entity section
            - Toolbar (inside section slot)
                - Edit button
            - Multiple Block Layouts
                - Up to three Form Layouts per Block Layout
        - List entity section
            - Toolbar (inside section slot; connected to Grid)
                - Filter input
                - Batch delete Button
                - Add Button
            - Grid

## Implementation

```vue
<template>
  <MateVerticalLayout theme="spacing" style="align-items: stretch;">
    <MateBreadcrumbs theme="padding">
      <MateBreadcrumb href="#">Übergeordnet</MateBreadcrumb>
      <MateBreadcrumb>Objekt</MateBreadcrumb>
    </MateBreadcrumbs>
    <MateDetails theme="object-header" title-text="Max Mustermann">
      <MateFloatingLayout>
        <MateFacetList>
          <MateFacet key-text="Person Nr.">1234567</MateFacet>
          <MateFacet key-text="Geburtsdatum">15.06.1952</MateFacet>
        </MateFacetList>
        <MateFacetList>
          <MateFacet key-text="Anrede">Herr</MateFacet>
          <MateFacet key-text="Vorname">Max</MateFacet>
          <MateFacet key-text="Nachname">Mustermann</MateFacet>
        </MateFacetList>
      </MateFloatingLayout>
    </MateDetails>
    <MateAnchorNav theme="expand-last">
      <MateAnchorNavSection name="Personendaten">
        <MateToolbar slot="header" title-text="Personendaten" theme="section">
          <MateButton>Bearbeiten</MateButton>
        </MateToolbar>
        <MateBlockLayout>
          <MateFacetList>
            <MateFacet key-text="Person Nr.">1234567</MateFacet>
            <MateFacet key-text="Geburtsdatum">15.06.1952</MateFacet>
          </MateFacetList>
          <MateFacetList>
            <MateFacet key-text="Anrede">Herr</MateFacet>
            <MateFacet key-text="Vorname">Max</MateFacet>
            <MateFacet key-text="Nachname">Mustermann</MateFacet>
          </MateFacetList>
        </MateBlockLayout>
      </MateAnchorNavSection>
      <hr/>
      <MateAnchorNavSection name="Adresse">
        <MateToolbar slot="header" title-text="Adresse" theme="section">
          <MateButton>Bearbeiten</MateButton>
        </MateToolbar>
        <MateBlockLayout>
          <MateFacetList>
            <MateFacet key-text="Strasse">Musterstrasse</MateFacet>
            <MateFacet key-text="Hausnummer">1</MateFacet>
          </MateFacetList>
          <MateFacetList>
            <MateFacet key-text="PLZ">12345</MateFacet>
            <MateFacet key-text="Ort">Musterhausen</MateFacet>
            <MateFacet key-text="Land">Deutschland</MateFacet>
          </MateFacetList>
        </MateBlockLayout>
      </MateAnchorNavSection>
      <hr/>
      <MateAnchorNavSection name="Kinder">
        <MateToolbar slot="header" title-text="Kinder" theme="section">
          <MateButton>Loeschen</MateButton>
        </MateToolbar>
        <MateGrid :items="childrenItems">
          <MateGridSortColumn header="Vorname" path="prename" :resizable="true" />
          <MateGridSortColumn header="Nachname" path="familyName" :resizable="true" />
        </MateGrid>
      </MateAnchorNavSection>
    </MateAnchorNav>
  </MateVerticalLayout>
</template>
```