Skip to content

NbDefinitionList renders facts as label-and-value pairs: the media inspector's "Uploaded / By / Size", an environment's "Owner / Repository / Workflow", the facts on a release. It is a real <dl>, so the pairing is in the markup rather than only in the layout.

vue
<NbDefinitionList
  :items="[
    { term: 'Uploaded', value: media.uploadedAt },
    { term: 'By', value: media.author },
    { term: 'Size', value: media.size },
  ]"
/>

The grid is on the row, never on the list ​

This is the reason the component exists, and it is worth being explicit about because the failure is quiet.

Putting display: grid on the <dl> makes every descendant a grid item. A <dt> and <dd> pair then lines up by luck, and anything else placed in the list, a heading, a divider, a form field, gets pulled into the columns too. That is exactly how a hand-rolled definition list in the CMS swallowed two form fields.

Here each row is its own grid, so a row can only ever lay out its own term and value. Anything else in the list is left alone.

Empty values ​

A value of null, undefined or '' renders an en dash rather than nothing, so the row keeps its place and the list does not appear to have fewer facts than it has. 0 and false are values, not absences.

Override per item with empty when a specific word is better than a dash.

Rich values ​

Use the default slot with NbDefinitionListItem when a value needs a link, a badge or anything else that is not a string. The row's layout still comes from the list, so the two forms line up identically.

items and the slot are alternatives, not layers. If both are given, items wins, because rendering both would silently interleave two sources of truth.

Layouts ​

columns is the default and reads as a facts table. stacked puts the label above the value, for long values or narrow space. auto switches between them on the width of its own container, using a container query, which is the distinction that matters in an inspector: the panel is narrow while the window is wide, and a media query cannot tell the difference.

Density and dividers ​

compact tightens the rows for a dense inspector. dividers draws a hairline between them, which is worth it for long lists and usually not worth it in a panel that already has plenty of rules.

Label column width ​

termWidth takes any grid track value. The default, minmax(6rem, 0.38fr), lets long labels wrap rather than starving the value.

NbDefinitionList props ​

PropTypeDefaultDescription
itemsIDefinitionListItem[][]The facts. Omit and use the slot for rich values.
layout'columns' | 'stacked' | 'auto''columns'auto uses a container query, not a media query.
termWidthstring'minmax(6rem, 0.38fr)'Grid track for the label column.
dividersbooleanfalseHairline between rows.
compactbooleanfalseTighter rows.

IDefinitionListItem ​

FieldTypeDescription
termstringThe label.
valuestring | number | nullThe value. null, undefined and '' render the empty text.
emptystringShown in place of an empty value. Defaults to an en dash.

NbDefinitionListItem props ​

PropTypeDefaultDescription
termstring''The label. Use the term slot for anything richer.

NbDefinitionListItem slots ​

SlotDescription
defaultThe value.
termThe label.