To give more flexibility, it's possible to use custom slots 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).
It's possible to adjust the layout behaviour for each layer (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;
prev
next
Open in Stackblitz
<!doctype html>
<htmllang="en"class="auto"><head><title></title></head><bodyclass="bg-base"><navaria-label="Main"><p-buttontype="button"aria="{'aria-haspopup': 'dialog'}"> Open Drilldown
</p-button><p-drilldownclass="[--p-drilldown-grid-template:repeat(5,auto)_minmax(0,1fr)/auto]"><p-drilldown-itemidentifier="id-1"label="Motorsport"class="[--p-drilldown-grid-template:auto/repeat(2,minmax(0,1fr))] [--p-drilldown-gap:0px_16px]"><p-drilldown-itemidentifier="id-1-1"label="718"><p-model-signatureslot="header"model="718"></p-model-signature><p-button-tileslot="button"label="Some label"description="718"weight="semi-bold"compact="true"aspectRatio="{'base': '1/1', 's': '9/16'}"class="mb-fluid-sm"><imgsrcset="assets/porsche-963@2x.webp 2x"src="assets/porsche-963.webp"width="636"height="847"alt="Porsche 963" /></p-button-tile><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-1-2"label="911"><p-model-signatureslot="header"model="911"></p-model-signature><p-button-tileslot="button"label="Some label"description="911"weight="semi-bold"compact="true"aspectRatio="{'base': '1/1', 's': '9/16'}"class="mb-fluid-sm"><imgsrcset="assets/porsche-963@2x.webp 2x"src="assets/porsche-963.webp"width="636"height="847"alt="Porsche 963" /></p-button-tile><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"aria-current="page"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-2"label="Some label"><p-drilldown-itemidentifier="id-2-1"label="Some label"><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-2-2"label="Some label"><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-3"label="Some label"><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-4"label="Some label"><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-5"label="Some label"><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor
</p-drilldown-link></p-drilldown-item><p-linkhref="#"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>
