slot="button" (renders a custom cascade button) and/or
slot="header" (renders a custom header on mobile view). It's even possible to customize the layout structure for each
layer individually with CSS variables (--p-drilldown-grid-template, --p-drilldown-gap).p-drilldown-item) individually by a CSS Custom Property
(aka CSS Variable):--p-drilldown-grid-template: auto / repeat(2, minmax(0, 1fr));
--p-drilldown-gap: 8px / 16px;
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<nav aria-label="Main">
<p-button type="button" aria="{'aria-haspopup': 'dialog'}">
Open Drilldown
</p-button>
<p-drilldown class="[--p-drilldown-grid-template:repeat(5,auto)_minmax(0,1fr)/auto]">
<p-drilldown-item identifier="id-1" label="Motorsport" class="[--p-drilldown-grid-template:auto/repeat(2,minmax(0,1fr))] [--p-drilldown-gap:0px_16px]">
<p-drilldown-item identifier="id-1-1" label="718">
<p-model-signature slot="header" model="718"></p-model-signature>
<p-button-tile slot="button" label="Some label" description="718" weight="semi-bold" compact="true" aspectRatio="{'base': '1/1', 's': '9/16'}" class="mb-fluid-sm">
<img srcset="assets/porsche-963@2x.webp 2x" src="assets/porsche-963.webp" width="636" height="847" alt="Porsche 963" />
</p-button-tile>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-1-2" label="911">
<p-model-signature slot="header" model="911"></p-model-signature>
<p-button-tile slot="button" label="Some label" description="911" weight="semi-bold" compact="true" aspectRatio="{'base': '1/1', 's': '9/16'}" class="mb-fluid-sm">
<img srcset="assets/porsche-963@2x.webp 2x" src="assets/porsche-963.webp" width="636" height="847" alt="Porsche 963" />
</p-button-tile>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#" aria-current="page">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-2" label="Some label">
<p-drilldown-item identifier="id-2-1" label="Some label">
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-2-2" label="Some label">
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-3" label="Some label">
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-4" label="Some label">
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-5" label="Some label">
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor
</p-drilldown-link>
</p-drilldown-item>
<p-link href="#" variant="secondary" icon="external" class="self-end">
Some external anchor
</p-link>
</p-drilldown>
</nav>
<script>
const pButton = document.querySelector("p-button");
const pDrilldown = document.querySelector("p-drilldown");
pButton.addEventListener('click', () => (pDrilldown.open = true));
pDrilldown.addEventListener('update', (e) => e.target.activeIdentifier = e.detail.activeIdentifier);
pDrilldown.addEventListener('dismiss', () => (pDrilldown.open = false));
</script>
</body>
</html>