Lily Design System™

SectionNav

A navigation container for section navigation links.

Example

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

<SectionNav label="Navigation">
  <!-- nav children -->
</SectionNav>

Usage

<SectionNav label="In this section">
  <SectionList>
    <SectionListItem><SectionLink href="/section-a">Section A</SectionLink></SectionListItem>
    <SectionListItem><SectionLink href="/section-b" current>Section B</SectionLink></SectionListItem>
  </SectionList>
</SectionNav>

Props

PropTypeDefaultDescription
labelstring (required)—Accessible label for the navigation landmark
childrenslot (required)—The SectionList and its children
...restPropsHTML attributes—Spread onto the root <nav>

Keyboard Interactions

  • Tab moves focus through the contained links

ARIA

  • <nav> element is a navigation landmark
  • aria-label (from label) names the landmark
  • aria-current="page" should be applied by the consumer to the current SectionLink

When to Use

  • Showing a sibling-page menu for a content section (typically rendered as a left-side or top sub-navigation)

When Not to Use

  • Use BreadcrumbNav for hierarchical position navigation
  • Use ContentsNav for in-page anchor links
  • Use NavigationMenu for global site navigation

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

Related components

  • section-list — list element used inside SectionNav
  • section-list-item — list item
  • section-link — individual link
  • contents-nav — in-page anchor navigation
  • breadcrumb-nav — hierarchical breadcrumb

References

Implementation Notes

  • Renders a <nav> landmark with aria-label to identify it (e.g. "In this section")
  • Wraps a SectionList of SectionListItem containing SectionLink children
  • Companion components: SectionList, SectionListItem, SectionLink
  • Spreads restProps onto the root <nav>

Canonical contract

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

Metadata

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

ARIA

  • <nav> element is a navigation landmark
  • aria-label (from label) names the landmark
  • aria-current="page" should be applied by the consumer to the current SectionLink

Keyboard

  • Tab moves focus through the contained links

Props

  • label: string (required) (default: —) — Accessible label for the navigation landmark
  • children: slot (required) (default: —) — The SectionList and its children
  • ...restProps: HTML attributes (default: —) — Spread onto the root <nav>