Nav List
The "interstitial nav" composition — a bordered, rounded panel of clickable drill-down
rows, each with an optional leading icon, a title + subtitle, and a trailing
chevron-right by default. Matches Shopify admin's "Store contact details" style block.
See patterns/interstitial-nav.md for the full
composition writeup.
Selectors: tip-nav-list (container), tip-nav-list-item (row)
API — tip-nav-list
| Name | Type | Default | Description |
|---|---|---|---|
| default slot | content | — | One or more tip-nav-list-item rows. |
tip-nav-list supplies only the bordered/rounded/clipped frame (border: 1px solid var(--border-default), border-radius: var(--radius-lg), overflow: hidden) — dividers between rows are owned by each tip-nav-list-item itself.
API — tip-nav-list-item
| Name | Type | Default | Description |
|---|---|---|---|
icon (input) |
string | undefined |
undefined |
Optional leading tip-icon name, muted tone. |
title (input, required) |
string |
— | Primary row label (heading weight). |
subtitle (input) |
string | undefined |
undefined |
Secondary muted line under the title. |
href (input) |
string | undefined |
undefined |
When set, the row renders as an <a href>; otherwise a <button type="button">. |
disabled (input) |
boolean |
false |
Disables the row (no click/select, reduced opacity, cursor: not-allowed). |
select (output) |
void |
— | Emitted on activation (click, or Enter/Space via native button/anchor semantics). |
[trailing] slot |
content | — | Custom trailing content. Defaults to a chevron-right tip-icon when nothing is projected. |
Usage
<tip-nav-list>
<tip-nav-list-item icon="building-2" title="Acme Corp — entity" subtitle="United States" />
</tip-nav-list>
<tip-nav-list>
<tip-nav-list-item icon="store" title="Acme Corp" subtitle="mandeep1985ster@gmail.com" (select)="openContact()" />
<tip-nav-list-item icon="map-pin" title="Business address" subtitle="United States" (select)="openAddress()" />
</tip-nav-list>
<!-- Custom trailing content instead of the default chevron -->
<tip-nav-list-item title="Two-factor authentication">
<tip-badge trailing tone="positive">On</tip-badge>
</tip-nav-list-item>
Notes
- Renders a real
<a>or<button>— never a<div>with a click handler — so Enter/Space activation andlink/buttona11y semantics come for free from the native element; no custom keydown handling is needed. - Default trailing-chevron detection uses a
[trailing]marker directive (NavListItemTrailing) queried via acontentChildsignal, since Angular's<ng-content>has no native "fallback content" the way a web-component<slot>does — presence must be checked explicitly rather than relying on:emptyCSS. - Full-row hover fill is
var(--surface-hover); the divider between rows is a1px solid var(--border-hairline)border-topon every row except the first (:host(:not(:first-child))), not a border owned by the container. - When embedding a
tip-nav-listinside atip-card, set[padding]="'0'"on the card and give the card's head + the list their own inset via thestg-card-head--inset/stg-nav-listclasses insettings-shared.css(see General's Business/Contact details cards) — otherwise the list's border sits flush against the card's own padding, doubling the inset.