Experimental Component
p-drilldown component is experimental and might be changed or removed in a future release.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.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.p-drilldown can be controlled by its open property.p-drilldown-item has a unique identifier and label defined.dismiss and update event in
order to get notified when p-drilldown needs to be closed or navigated to another hierarchy level.<!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>
<p-drilldown-item identifier="id-1" label="Some Label (1)">
<p-drilldown-item identifier="id-1-1" label="Some Label (1-1)">
<p-drilldown-link href="#">
Some anchor (1-1)
</p-drilldown-link>
<p-drilldown-link>
<a href="#">
Some anchor (1-1)
</a>
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-1-2" label="Some Label (1-2)">
<p-drilldown-link href="#">
Some anchor (1-2)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (1-2)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (1-2)
</p-drilldown-link>
<p-drilldown-item identifier="id-1-2-1" label="Some Label (1-2-1)">
<p-drilldown-link href="#">
Some anchor (1-2-1)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (1-2-1)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-link href="#">
Some anchor (1-2)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-link href="#">
Some anchor (1-1)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (1-1)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (1-1)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-2" label="Some Label (2)">
<p-drilldown-link href="#">
Some anchor (2)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (2)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (2)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (2)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-3" label="Some Label (3)">
<p-drilldown-link href="#">
Some anchor (3)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (3)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (3)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-4" label="Some Label (4)">
<p-drilldown-link href="#">
Some anchor (4)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (4)
</p-drilldown-link>
<p-drilldown-link href="#">
Some anchor (4)
</p-drilldown-link>
</p-drilldown-item>
<p-drilldown-item identifier="id-5" label="Some Label (5)">
<p-drilldown-link href="#">
Some anchor (5)
</p-drilldown-link>
<p-drilldown-link href="#">
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>