Side Nav
Usage notes
Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.
Default
Toggle markup
<nav is="coral-sidenav" style="width:240px;">
<a is="coral-sidenav-item" href="#">Item 1</a>
<a is="coral-sidenav-item" href="#">Item 2</a>
<a is="coral-sidenav-item" href="#">Item 3</a>
</nav>
With icons and pre-selection
Toggle markup
<nav is="coral-sidenav" style="width:240px;">
<a is="coral-sidenav-item" href="#" icon="Add" selected="">Item 1</a>
<a is="coral-sidenav-item" href="#" icon="Remove">Item 2</a>
<a is="coral-sidenav-item" href="#" icon="Star">Item 3</a>
</nav>
With headings
Toggle markup
<nav is="coral-sidenav" style="width:240px;">
<coral-sidenav-heading aria-level="3">Heading A</coral-sidenav-heading>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">A item 1</a>
<a is="coral-sidenav-item" href="#">A item 2</a>
<a is="coral-sidenav-item" href="#">A item 3</a>
</coral-sidenav-level>
<coral-sidenav-heading aria-level="3">Heading B</coral-sidenav-heading>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">B item 1</a>
<a is="coral-sidenav-item" href="#">B item 2</a>
<a is="coral-sidenav-item" href="#">B item 3</a>
</coral-sidenav-level>
</nav>
With custom selection behavior
Toggle markup
<nav is="coral-sidenav" id="sidenav" style="width:240px;">
<a is="coral-sidenav-item" href="#">Item 1</a>
<a is="coral-sidenav-item" href="#">Item 2</a>
<a is="coral-sidenav-item" href="#">Item 3</a>
</nav>
<script>
const nav = document.getElementById('sidenav');
sidenav.addEventListener('coral-sidenav:change', function(event) {
alert(event.detail.selection.content.textContent + ' is selected');
});
</script>
Multi-level variant
Toggle markup
<nav is="coral-sidenav" variant="multilevel" style="width:240px;">
<a is="coral-sidenav-item" href="#">Item 1</a>
<a is="coral-sidenav-item" href="#">Item 2</a>
<a is="coral-sidenav-item" href="#">Expandable Item 3</a>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Sub Item 1</a>
<a is="coral-sidenav-item" href="#">Sub Item 2</a>
<a is="coral-sidenav-item" href="#">Expandable Sub Item 3</a>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Sub Item 1</a>
<a is="coral-sidenav-item" href="#">Sub Item 2</a>
<a is="coral-sidenav-item" href="#">Sub Item 3</a>
</coral-sidenav-level>
</coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Item 4</a>
</nav>
Pre-selected item
Toggle markup
<nav is="coral-sidenav" variant="multilevel" style="width:240px;">
<a is="coral-sidenav-item" href="#">Level 1</a>
<a is="coral-sidenav-item" href="#">Level 2</a>
<a is="coral-sidenav-item" href="#">Level 3</a>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Level 3.1</a>
<a is="coral-sidenav-item" href="#">Level 3.2</a>
<a is="coral-sidenav-item" href="#">Level 3.3</a>
<coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Level 3.3.1</a>
<a is="coral-sidenav-item" href="#">Level 3.3.2</a>
<a is="coral-sidenav-item" href="#" selected="">Level 3.3.3</a>
</coral-sidenav-level>
</coral-sidenav-level>
<a is="coral-sidenav-item" href="#">Item 4</a>
</nav>