Side Navigation

A hierarchical, vertical navigation component following USWDS patterns. Supports up to three levels of navigation depth.

Props

Prop	Default	Description
`aria_label`	`Side navigation`	ARIA label for the navigation element
`extra_classes`		Additional CSS classes for the sidenav

Slots

Slot	Description
(default)	Navigation items

Sub-components

`c-side_nav.item`

Prop	Default	Description
`text`		Link text
`href`		Link URL
`is_current`	`false`	Mark as current page
`extra_classes`		Additional CSS classes for the item

Slot: Can contain child c-side_nav.item elements to create nested navigation (sublists).

Example Usage

Basic Side Navigation

<c-side_nav>
    <c-side_nav.item text="Current page" href="#" is_current="true" />
    <c-side_nav.item text="Parent link" href="#" />
    <c-side_nav.item text="Parent link" href="#" />
</c-side_nav>

Side Navigation with Children

<c-side_nav aria_label="Main navigation">
    <c-side_nav.item text="Parent link" href="#" />
    <c-side_nav.item text="Current page" href="#" is_current="true">
        <c-side_nav.item text="Child link" href="#" />
        <c-side_nav.item text="Child link" href="#" />
        <c-side_nav.item text="Child link (current)" href="#" is_current="true" />
    </c-side_nav.item>
    <c-side_nav.item text="Parent link" href="#" />
</c-side_nav>

Side Navigation with Grandchildren

<c-side_nav>
    <c-side_nav.item text="Parent link" href="#" />
    <c-side_nav.item text="Current page" href="#" is_current="true">
        <c-side_nav.item text="Child link" href="#" />
        <c-side_nav.item text="Child link" href="#">
            <c-side_nav.item text="Grandchild link" href="#" />
            <c-side_nav.item text="Grandchild link (current)" href="#" is_current="true" />
            <c-side_nav.item text="Grandchild link" href="#" />
        </c-side_nav.item>
        <c-side_nav.item text="Child link" href="#" />
    </c-side_nav.item>
    <c-side_nav.item text="Parent link" href="#" />
</c-side_nav>

Usage Notes

The is_current prop adds the usa-current class to indicate the current page
Nested items automatically create sublists with the usa-sidenav__sublist class
USWDS supports up to three levels of nesting (parent, child, grandchild)
Only the active navigation path should be expanded to show children

{% load cotton %}

<div class="component-variants">
    <h1>Side Navigation Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton side_nav aria_label="{{ variant.aria_label }}" %}
            {% for item in variant.items %}
            {% cotton side_nav.item text="{{ item.text }}" href="{{ item.href }}" is_current="{{ item.is_current|default:'' }}" %}
                {% if item.children %}
                    {% for child in item.children %}
                    {% cotton side_nav.item text="{{ child.text }}" href="{{ child.href }}" is_current="{{ child.is_current|default:'' }}" %}
                        {% if child.children %}
                            {% for grandchild in child.children %}
                            {% cotton side_nav.item text="{{ grandchild.text }}" href="{{ grandchild.href }}" is_current="{{ grandchild.is_current|default:'' }}" %}{% endcotton %}
                            {% endfor %}
                        {% endif %}
                    {% endcotton %}
                    {% endfor %}
                {% endif %}
            {% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Side Navigation
context:
  variants:
    - title: "Basic Side Navigation"
      aria_label: "Side navigation"
      items:
        - text: "Current page"
          href: "#"
          is_current: "true"
        - text: "Parent link"
          href: "#"
        - text: "Parent link"
          href: "#"
    - title: "Side Navigation with Children"
      aria_label: "Side navigation with children"
      items:
        - text: "Parent link"
          href: "#"
        - text: "Current page"
          href: "#"
          is_current: "true"
          children:
            - text: "Child link"
              href: "#"
            - text: "Child link"
              href: "#"
            - text: "Child link (current)"
              href: "#"
              is_current: "true"
        - text: "Parent link"
          href: "#"
    - title: "Side Navigation with Grandchildren"
      aria_label: "Side navigation with grandchildren"
      items:
        - text: "Parent link"
          href: "#"
        - text: "Current page"
          href: "#"
          is_current: "true"
          children:
            - text: "Child link"
              href: "#"
            - text: "Child link"
              href: "#"
              children:
                - text: "Grandchild link"
                  href: "#"
                - text: "Grandchild link (current)"
                  href: "#"
                  is_current: "true"
                - text: "Grandchild link"
                  href: "#"
            - text: "Child link"
              href: "#"
        - text: "Parent link"
          href: "#"