Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · detail-page

Detail page

A Mado page recipe for a record overview with native breadcrumbs, resilient missing state, grouped metadata and explicit actions.

Install with npx @madojs/ui@latest add detail-page.

Template

Detail page

Composition

  • Adapt the parameterized detail route into breadcrumbs, page header, explicit missing state and labelled panels containing native description lists.
  • Replace local fixtures and route paths at copy time; keep routeUrl() and data-link on internal navigation.

Public API

export default Page<{ id: string }>
Parameterized route page with dynamic title and head description.
export detailPageView({ params })
Directly previewable ready/missing view contract.
attribute params.id
Route-owned record identifier; application code resolves it to data.

Accessibility contract

  • The article has one h1, labelled sections and a native breadcrumb landmark.
  • Missing records render an honest visible state and recovery link rather than an empty or misleading ready surface.

Keyboard

  • The template adds no page-wide keyboard model; native links, forms and controls keep their browser-defined behavior.

Focus

  • The consuming route layout owns navigation focus. Keep one meaningful data-mado-focus target and do not focus arbitrary content updates.

Fallback

  • The copied template renders semantic HTML; links and native forms remain understandable before optional client-side enhancement.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.