<template>
<div class="wd-example-preview-nav-list">
<w-nav-list heading="Marketing"></w-nav-list>
</div>
</template>
<script type="module">
const navListItems = [
{
title: 'Public Profile',
isActive: true,
dataId: 'watson1'
},
{
title: 'Account',
isActive: false
},
{
title: 'Organization',
isActive: false
},
{
title: 'Messages',
counter: 4,
isActive: false
},
{
title: 'Logout',
isActive: false
}
];
const navListBasic = document.querySelector('w-nav-list');
navListBasic.items = navListItems;
navListBasic.addEventListener('change', handleNavItemClick);
function handleNavItemClick(e) {
console.log(`You clicked on ${e.detail[0]}`);
}
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
heading |
Defines a heading title for the navigation list |
string |
|
|
|
items |
An array of objects that represents the list of Navigation Items for the Navigation List component. |
array |
[] |
[ { title: String, isActive: Boolean, counter: Number, counterType: String, href: String, leadingVisual: Object } ] |
Slots
|
Name |
Description |
|---|---|
|
default |
Default content slot for nav-list |
Events
|
Name |
Description |
Type |
|---|---|---|
|
change |
This event is emitted when nav item change. |
{ "names": [ "String" ] } |