A list item provides accessibility controls and common functionality. The component uses child components that provide styling and slots for different types of list items. If you want to create a custom list item you can pass a type "custom", which will let you define the structure of the content.
The default list item has 5 slots that can be used for the most common use cases, start, end, default, subtitle and bottom slot. All of the slots are optional.
The start slot can contain content, such as an avatar, that will be positioned at the start (left in LTR) of the main content.
The end slot works the same way, but its contents are placed at the end (right in LTR) of the main slot.
The default slot contains the main content of the list item.
The subtitle slot can be used to display content below the default slot. The slot has smaller text size and lighter color than default slot.
The bottom slot can be used to display content below the subtitle slot.
<ul> <dt-list-item navigation-type="tab"> <template #start> <dt-icon size="300" name="check" /> </template> <span>Default List Item</span> <template #subtitle> Description </template> <template #bottom> <dt-badge text="Label" /> </template> <template #end> <dt-icon size="300" name="external-link" /> </template> </dt-list-item> </ul>
When type is set to "custom" the list item will not render any styles or slots. This type can be used when the list item has to support content that does not work with the default structure.
<ul> <dt-list-item navigation-type="tab" type="custom" > <dt-stack direction="row" align="start" justify="between" gap="500" class="d-py-100 d-px-150 d-pie-100"> <dt-stack align="baseline" direction="row" gap="400"> <dt-text kind="body" tone="muted" :size="100" datetime="10:00" > 10:00 </dt-text> <dt-text :size="300" density="300" kind="body" tone="secondary"> Custom list item example lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </dt-text> </dt-stack> <dt-stack direction="row"> <dt-button :size="100" kind="muted" importance="clear" title="share" > <template #startIcon="{ iconSize }"> <dt-icon name="share" :size="iconSize" /> </template> </dt-button> <dt-button :size="100" kind="muted" importance="clear" title="star" > <template #startIcon="{ iconSize }"> <dt-icon name="star" :size="iconSize" /> </template> </dt-button> <dt-button :size="100" kind="muted" importance="clear" title="more" > <template #startIcon="{ iconSize }"> <dt-icon name="more-vertical" :size="iconSize" /> </template> </dt-button> </dt-stack> </dt-stack> </dt-list-item> </ul>
import { DtListItem } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | slot for the main content |
slotName | named slots for custom list items |
Name
|
Default
|
Type
|
|---|---|---|
elementType | 'li' | string HTML element type (tag name) of the content wrapper element. |
id | generated unique ID | string Id for the item. |
navigationType | none |
"arrow-keys"
|
"tab"
|
"none"
The type of navigation that this component should support. |
role | 'listitem' |
"listitem"
|
"menuitem"
|
"option"
String to use for the item's role. |
selected | false | boolean Applies selected styles to the list item |
type | default |
"default"
|
"custom"
The type of child list item to use. |
wrapperClass | '' | string|object|array Additional Classes to apply to the wrapper element,
note: it only applies on "default" type
Can accept all of: String, Object, and Array, i.e. has the
same api as Vue's built-in handling of the class attribute. |
Name
|
Type
|
|---|---|
click | PointerEvent | KeyboardEvent Native click event |
keydown | KeyboardEvent Key down event |
mouseleave | MouseEvent Native mouse leave event |
mousemove | MouseEvent Native mouse move event |
List item documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope