Lily Design System™

SectionListItem

One section navigation item.

Example

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

<SectionListItem>
  <!-- SectionListItem content -->
</SectionListItem>

Usage

<SectionListItem><SectionLink href="/a">A</SectionLink></SectionListItem>

Props

PropTypeDefaultDescription
childrenslot (required)—Typically a single SectionLink
...restPropsHTML attributes—Spread onto the root <li>

Keyboard Interactions

  • No keyboard interactions on the list item itself; the inner link receives focus

ARIA

  • Native <li> semantics

When to Use

  • As a child of SectionList enumerating section navigation links

When Not to Use

  • Use the appropriate *ListItem for other navigation patterns (e.g. BreadcrumbListItem)

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-item as the root class. No default styles are included.

Related components

  • section-list — parent list
  • section-link — link inside the item

References

Implementation Notes

  • Renders a <li> containing a SectionLink
  • Used inside SectionList
  • Spreads restProps onto the root <li>

Canonical contract

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

Metadata

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

ARIA

  • Native <li> semantics

Keyboard

  • No keyboard interactions on the list item itself; the inner link receives focus

Props

  • children: slot (required) (default: —) — Typically a single SectionLink
  • ...restProps: HTML attributes (default: —) — Spread onto the root <li>