Lily Design System™

SectionList

A list of section navigation items.

Example

SectionList
Show demo markup 
<div class="section-list" aria-label="a list of section navigation items">SectionList</div>
Usage example 
<SectionList>
  <SectionListItem><SectionLink href="/a">A</SectionLink></SectionListItem>
  <SectionListItem><SectionLink href="/b" current>B</SectionLink></SectionListItem>
</SectionList>
Show Svelte source 
// In your Svelte component:
import SectionList from "lily-design-system-svelte-headless/components/SectionList/SectionList.svelte";

<SectionList>
  <!-- list children -->
</SectionList>

Usage

<SectionList>
  <SectionListItem><SectionLink href="/a">A</SectionLink></SectionListItem>
  <SectionListItem><SectionLink href="/b" current>B</SectionLink></SectionListItem>
</SectionList>

Props

PropTypeDefaultDescription
childrenslot (required)—SectionListItem elements
...restPropsHTML attributes—Spread onto the root <ol>

Keyboard Interactions

  • No keyboard interactions on the list itself

ARIA

  • Native ordered list semantics announce the count of items

When to Use

  • As the list element inside a SectionNav

When Not to Use

  • Use BreadcrumbList, ContentsList, PaginationList, or TreeList in their respective navs

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .section-list as the root class. No default styles are included.

Related components

  • section-nav — parent landmark
  • section-list-item — child list item
  • section-link — link rendered inside each list item

References

Implementation Notes

  • Renders an <ol> containing SectionListItem children
  • Used inside SectionNav to enumerate the section's pages
  • Spreads restProps onto the root <ol>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: section-list
  • PascalCase: SectionList
  • Description: a list of section navigation items
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <ol>
  • CSS class: .section-list
  • Interactive: no

ARIA

  • Native ordered list semantics announce the count of items

Keyboard

  • No keyboard interactions on the list itself

Props

  • children: slot (required) (default: —) — SectionListItem elements
  • ...restProps: HTML attributes (default: —) — Spread onto the root <ol>