Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · navigation-list

Navigation list

A native list of page and section links with responsive layouts and current-location presentation.

Install with npx @madojs/ui@latest add navigation-list.

Composition

  • Compose a labelled nav from an optional visible heading, a native list and native link items.

Public API

class mado-ui-navigation-list / label / items / item / link
Navigation landmark and list presentation.
attribute data-layout
Optional horizontal wrapping presentation; it does not change link behavior.
attribute aria-current
Application-owned current page or location marker.

Detected public classes

  • .mado-ui-navigation-list
  • .mado-ui-navigation-list-item
  • .mado-ui-navigation-list-items
  • .mado-ui-navigation-list-label
  • .mado-ui-navigation-list-link

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-action-hover
  • --mado-ui-color-border
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-focus-ring
  • --mado-ui-navigation-list-current-background
  • --mado-ui-navigation-list-current-border
  • --mado-ui-navigation-list-current-color
  • --mado-ui-navigation-list-focus-ring
  • --mado-ui-navigation-list-gap
  • --mado-ui-navigation-list-items-gap
  • --mado-ui-navigation-list-label-color
  • --mado-ui-navigation-list-link-color
  • --mado-ui-navigation-list-link-gap
  • --mado-ui-navigation-list-link-hover-background
  • --mado-ui-navigation-list-link-hover-color
  • --mado-ui-navigation-list-link-min-height
  • --mado-ui-navigation-list-link-padding
  • --mado-ui-navigation-list-link-radius
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3

Accessibility contract

  • Give the nav a localized aria-label or connect aria-labelledby to the visible label.
  • Links keep real href values, and exactly one link is current when the navigation represents the current route.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

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.