The p-drilldown component is experimental and might be changed or removed in a future release.
The p-drilldown component is meant for displaying an infinite multilevel structure in a drilldown menu that overlays
the page content from the start side of the screen. It is a controlled component that gives you flexible control over
its behavior.
The basic concept of the component is to have a button that opens the p-drilldown with an infinite multilevel
structure. The levels are generated out of p-drilldown-item which generates a list of cascade buttons to navigate to a
deeper level, back buttons and a header section on mobile view. These items can be filled with e.g. p-drilldown-link,
another p-drilldown-item or any HTML element.
The visibility of p-drilldown can be controlled by its open property.
It's obligatory that each p-drilldown-item has a unique identifier and label defined.
Since it's a controlled component it's necessary to register an event listener for the dismiss and update event in
order to get notified when p-drilldown needs to be closed or navigated to another hierarchy level.
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-drilldown><p-drilldown-itemidentifier="id-1"label="Some Label (1)"><p-drilldown-itemidentifier="id-1-1"label="Some Label (1-1)"><p-drilldown-linkhref="#"> Some anchor (1-1)
</p-drilldown-link><p-drilldown-link><ahref="#"> Some anchor (1-1)
</a></p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-1-2"label="Some Label (1-2)"><p-drilldown-linkhref="#"> Some anchor (1-2)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (1-2)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (1-2)
</p-drilldown-link><p-drilldown-itemidentifier="id-1-2-1"label="Some Label (1-2-1)"><p-drilldown-linkhref="#"> Some anchor (1-2-1)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (1-2-1)
</p-drilldown-link></p-drilldown-item><p-drilldown-linkhref="#"> Some anchor (1-2)
</p-drilldown-link></p-drilldown-item><p-drilldown-linkhref="#"> Some anchor (1-1)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (1-1)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (1-1)
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-2"label="Some Label (2)"><p-drilldown-linkhref="#"> Some anchor (2)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (2)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (2)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (2)
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-3"label="Some Label (3)"><p-drilldown-linkhref="#"> Some anchor (3)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (3)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (3)
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-4"label="Some Label (4)"><p-drilldown-linkhref="#"> Some anchor (4)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (4)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (4)
</p-drilldown-link></p-drilldown-item><p-drilldown-itemidentifier="id-5"label="Some Label (5)"><p-drilldown-linkhref="#"> Some anchor (5)
</p-drilldown-link><p-drilldown-linkhref="#"> Some anchor (5)
</p-drilldown-link></p-drilldown-item></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>
