Lily Design System™

SectionLink

One section link in the navigation.

Example

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

<SectionLink>SectionLink</SectionLink>

Usage

<SectionLink href="/section-a" current>Section A</SectionLink>

Props

PropTypeDefaultDescription
hrefstring (required)—Link target
currentbooleanfalseWhether this link represents the current page
childrenslot (required)—Link text
...restPropsHTML attributes—Spread onto the root <a>

Keyboard Interactions

  • Tab moves focus onto the link
  • Enter activates the link (native browser behaviour)

ARIA

  • Native anchor accessibility
  • aria-current="page" when current is true

When to Use

  • As the clickable element inside SectionListItem

When Not to Use

  • Use BreadcrumbLink, ContentsLink, PaginationLink, or TreeLink 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-link as the root class. No default styles are included.

Related components

  • section-nav — landmark wrapper
  • section-list / section-list-item — structural ancestors

References

Implementation Notes

  • Renders an <a> linking to a section page
  • When current is true, sets aria-current="page" to mark the active section
  • Spreads restProps onto the root <a>

Canonical contract

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

Metadata

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

ARIA

  • Native anchor accessibility
  • aria-current="page" when current is true

Keyboard

  • Tab moves focus onto the link
  • Enter activates the link (native browser behaviour)

Props

  • href: string (required) (default: —) — Link target
  • current: boolean (default: false) — Whether this link represents the current page
  • children: slot (required) (default: —) — Link text
  • ...restProps: HTML attributes (default: —) — Spread onto the root <a>