Nav Item
<zn-nav-item> | ZnNavItem
A selectable row in a zn-nav-list, with an optional description and count.
<zn-nav-list> <zn-nav-item count="4">Monthly plans</zn-nav-item> <zn-nav-item count="3">Annual plans</zn-nav-item> </zn-nav-list>
Nav items are used inside a Nav List. See its page for the master–detail layout.
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/nav-item/nav-item.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/nav-item/nav-item.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/nav-item/nav-item.js';
Slots
| Name | Description |
|---|---|
| (default) | The item’s label. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
count
|
A count shown at the end of the row, such as the number of entries in the group. |
string
|
- | |
description
|
A line of detail shown below the label. |
string
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
label |
The label, truncated with an ellipsis. |
description |
The description shown below the label. |
count |
The count shown at the end of the row. |
handle |
The drag handle, shown when the list is sortable. |
Learn more about customizing CSS parts.