Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · application-shell

Application shell

A stateless Mado layout recipe with skip navigation, responsive application chrome and native route links.

Install with npx @madojs/ui@latest add application-shell.

Template

Application shell

Composition

  • Use the default Page as a layout around child routes: skip link, brand header, labelled navigation sidebar and one main route outlet.
  • Replace the example route map and brand at copy time while preserving routeUrl(), data-link and exact-versus-prefix current-route matching.

Public API

export default Page
Layout-ready page consumed by mado layout().
export applicationShellView({ child, path })
Directly previewable shell view with reactive current-route state.
attribute data-mado-focus
Marks the main route outlet as the navigation focus target.
class mado-ui-application-shell-*
Shell, skip-link, header, brand, body, sidebar, navigation and main hooks.

Detected public classes

  • .mado-ui-application-shell
  • .mado-ui-application-shell-body
  • .mado-ui-application-shell-brand
  • .mado-ui-application-shell-header
  • .mado-ui-application-shell-main
  • .mado-ui-application-shell-navigation
  • .mado-ui-application-shell-sidebar
  • .mado-ui-application-shell-skip-link

Detected public CSS properties

  • --mado-ui-application-shell-background
  • --mado-ui-application-shell-border
  • --mado-ui-application-shell-brand-color
  • --mado-ui-application-shell-color
  • --mado-ui-application-shell-content-max-inline-size
  • --mado-ui-application-shell-focus-ring
  • --mado-ui-application-shell-header-background
  • --mado-ui-application-shell-header-padding
  • --mado-ui-application-shell-main-padding
  • --mado-ui-application-shell-sidebar-background
  • --mado-ui-application-shell-sidebar-padding
  • --mado-ui-application-shell-sidebar-width
  • --mado-ui-application-shell-skip-background
  • --mado-ui-application-shell-skip-border
  • --mado-ui-application-shell-skip-color
  • --mado-ui-application-shell-skip-radius
  • --mado-ui-color-action
  • --mado-ui-color-action-contrast
  • --mado-ui-color-border
  • --mado-ui-color-canvas
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-focus-ring
  • --mado-ui-radius-sm
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-space-5
  • --mado-ui-space-7

Accessibility contract

  • Keep one main landmark, a working skip link and a uniquely labelled navigation landmark.
  • Current navigation state uses aria-current="page"; authentication and authorization stay outside this presentational layout.

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.