Nav List
<zn-nav-list> | ZnNavList
The list side of a master–detail layout: a card of selectable groups shown beside the selected group’s
contents. Place it in the left slot of <zn-tabs gap>, which switches the
detail panels.
The selected group’s contents (usually a data table).
Annual plan contents.
Billing preference contents.
<zn-tabs flush gap> <zn-nav-list slot="left"> <zn-nav-item tab="" count="4">Monthly plans</zn-nav-item> <zn-nav-item tab="annual-plans" count="3">Annual plans</zn-nav-item> <zn-nav-item tab="billing" count="3">Billing preferences</zn-nav-item> </zn-nav-list> <zn-panel id="" caption="Monthly plans"> <p>The selected group's contents (usually a data table).</p> </zn-panel> <zn-panel id="annual-plans" caption="Annual plans"> <p>Annual plan contents.</p> </zn-panel> <zn-panel id="billing" caption="Billing preferences"> <p>Billing preference contents.</p> </zn-panel> </zn-tabs>
Examples
Master–Detail
Use a nav list when a long set of groups sits beside the selected group’s contents. Place it in the
left slot of a zn-tabs with the flush and
gap attributes. Each zn-nav-item takes a tab attribute naming the
id of its panel, the same way tab navigation does, so the selection can also be remembered with
store-key and panels loaded with tab-uri.
When the tabs are narrower than 900px, the list moves above the contents and scrolls after 224px.
Customer contents.
Lead contents.
Archived contents.
<zn-tabs flush gap> <zn-nav-list slot="left"> <zn-nav-item tab="" count="12">Customers</zn-nav-item> <zn-nav-item tab="leads" count="48">Leads</zn-nav-item> <zn-nav-item tab="archived">Archived</zn-nav-item> </zn-nav-list> <zn-panel id="" caption="Customers"> <p>Customer contents.</p> </zn-panel> <zn-panel id="leads" caption="Leads"> <p>Lead contents.</p> </zn-panel> <zn-panel id="archived" caption="Archived"> <p>Archived contents.</p> </zn-panel> </zn-tabs>
Counts
Set count on an item to show a count at the end of the row. Long labels are truncated with an
ellipsis.
<zn-nav-list> <zn-nav-item count="4">Monthly plans</zn-nav-item> <zn-nav-item count="128">A group with a much longer name than the list is wide</zn-nav-item> <zn-nav-item>No count</zn-nav-item> </zn-nav-list>
Divided
Add the divide attribute for full-width rows split by dividers, with the selected row marked by
a bar on its edge and counts drawn as pills. Give an item a description for a line of detail
below its label.
General contents.
Security contents.
Closing contents.
<zn-tabs flush gap> <zn-nav-list slot="left" caption="Sections" divide> <zn-nav-item tab="" count="6" description="Opening, discovery and resolution">General</zn-nav-item> <zn-nav-item tab="security" count="5" description="Identity checks and disclosures">Security & compliance</zn-nav-item> <zn-nav-item tab="closing" count="3" description="Wrap-up and follow-up">Closing</zn-nav-item> </zn-nav-list> <zn-panel id="" caption="General"><p>General contents.</p></zn-panel> <zn-panel id="security" caption="Security & compliance"><p>Security contents.</p></zn-panel> <zn-panel id="closing" caption="Closing"><p>Closing contents.</p></zn-panel> </zn-tabs>
Search
Add the searchable attribute to filter the items by their label. Set
search-placeholder and empty-label to change the input’s placeholder and the
message shown when nothing matches.
Monthly plan contents.
Annual plan contents.
Billing preference contents.
Notification contents.
Security contents.
<zn-tabs flush gap> <zn-nav-list slot="left" searchable search-placeholder="Search groups"> <zn-nav-item tab="" count="4">Monthly plans</zn-nav-item> <zn-nav-item tab="annual-plans" count="3">Annual plans</zn-nav-item> <zn-nav-item tab="billing" count="3">Billing preferences</zn-nav-item> <zn-nav-item tab="notifications" count="7">Notifications</zn-nav-item> <zn-nav-item tab="security" count="2">Security</zn-nav-item> </zn-nav-list> <zn-panel id="" caption="Monthly plans"><p>Monthly plan contents.</p></zn-panel> <zn-panel id="annual-plans" caption="Annual plans"><p>Annual plan contents.</p></zn-panel> <zn-panel id="billing" caption="Billing preferences"><p>Billing preference contents.</p></zn-panel> <zn-panel id="notifications" caption="Notifications"><p>Notification contents.</p></zn-panel> <zn-panel id="security" caption="Security"><p>Security contents.</p></zn-panel> </zn-tabs>
Width and Height
Set --zn-nav-list-width to change the card’s width, and
--zn-nav-list-max-height to cap its height. The list scrolls inside the card once it reaches
the cap.
<zn-nav-list style="--zn-nav-list-width: 12rem; --zn-nav-list-max-height: 9rem;"> <zn-nav-item count="1">January</zn-nav-item> <zn-nav-item count="4">February</zn-nav-item> <zn-nav-item count="2">March</zn-nav-item> <zn-nav-item count="6">April</zn-nav-item> <zn-nav-item count="3">May</zn-nav-item> <zn-nav-item count="5">June</zn-nav-item> </zn-nav-list>
Keyboard
The list is a single tab stop. Arrow Up and Arrow Down move between items, Home and End jump to the first and last, and Enter or Space selects the focused item.
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-list/nav-list.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-list/nav-list.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/nav-list/nav-list.js';
Slots
| Name | Description |
|---|---|
| (default) | zn-nav-item elements. |
actions
|
Actions in the card’s header, beside the caption. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
searchable
|
Shows a search input that filters the items by their label. |
|
boolean
|
false
|
emptyLabel
empty-label
|
Shown when the search matches no items. |
string
|
'No matches'
|
|
caption
|
A heading for the card, shown with the actions slot above the items. |
string
|
''
|
|
divide
|
Draws the items as full-width rows split by dividers, marking the selected one with a bar on its edge. |
|
boolean
|
false
|
sortable
|
Lets the items be dragged, or moved with Alt+Arrow keys, into a new order. |
|
boolean
|
false
|
name
|
Submits the order as [{key, priority}] JSON, keyed by each item’s
value (or tab), counting from 1.
|
string
|
''
|
|
form
|
Associates the list with a form by id. |
|
string
|
''
|
formAction
formaction
|
When set, the form is submitted after each reorder, to this URL or, when empty, the form’s own action. |
string
|
- | |
value
|
The order as [{key, priority}] JSON. |
- | - | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
zn-change |
|
Emitted when a sortable list’s items have been moved. | - |
zn-reorder |
|
Emitted when a sortable list’s items have been moved. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
getPriorityMap() |
The order as {key, priority} pairs, counting from 1. |
- |
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--zn-nav-list-width |
The width of the card beside the detail. | |
--zn-nav-list-max-height |
Caps the card’s height; the list scrolls beyond it. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
header |
The header holding the caption and actions. |
search |
The wrapper around the search input. |
list |
The scrolling list of items. |
empty |
The message shown when the search matches nothing. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-color-picker><zn-example><zn-icon><zn-input><zn-popup><zn-slash-item><zn-slash-menu><zn-tooltip>