# Recursive Nav Examples

Recursive nav examples for trees, footers, and sidebars — for when the nav tag makes your brain hurt a little.

Let's say we have the following pages:

<figure>
    <img src="/img/tips/recursive-nav-pages.png" alt="Pages hierarchy example">
</figure>

## Footer Nav Example

Maybe you would like to render a footer hierarchy, with top level pages as `<h3>`'s, direct sub-items as `<li>` items, while ignoring anything deeper than level 2 in the nav structure:

<figure>
    <img src="/img/tips/recursive-nav-footer-example.png" alt="Footer nav example">
</figure>

We can do this by performing a `depth` check to decide how to render the current item based on it's depth in the nav structure:

::tabs

::tab antlers
```antlers
<div class="flex">
    {{ nav }}
        {{ if depth == 1 }}
            <div class="mx-10">
                <h3 class="mb-2">{{ title }}</h3>
                {{ if children }}
                    <ul>{{ *recursive children* }}</ul>
                {{ /if }}
            </div>
        {{ elseif depth == 2 }}
            <li class="my-1">
                <a href="{{ url }}">{{ title }}</a>
            </li>
        {{ /if }}
    {{ /nav }}
</div>
```
::tab blade
```blade
<div class="flex">
  <s:nav>
    @if ($depth == 1)
      <div class="mx-10">
        <h3 class="mb-2">{{ $title }}</h3>

        @if (count($children) > 0)
          <ul>@recursive_children</ul>
        @endif
      </div>
    @elseif ($depth == 2)
      <li class="my-1">
        <a href="{{ $url }}">{{ $title }}</a>
      </li>
    @endif
  </s:nav>
</div>
```
::

## Sidebar Nav Example

Or maybe you would like to render a sidebar style nav as a `<ul>`, while applying a different css class based on the page's depth in the nav structure:

<figure>
    <img src="/img/tips/recursive-nav-sidebar-example.png" alt="Sidebar nav example">
</figure>

Here we dynamically insert a CSS class based on the current item's `depth` in the nav structure:

::tabs

::tab antlers
```antlers
---
nav_classes:
  1: 'text-gray-900 font-bold'
  2: 'text-gray-800 ml-3'
  3: 'text-gray-500 ml-6 text-sm'
---

<ul class="nav">
    {{ nav }}
        <li>
            <span class="{{ view:nav_classes[depth] }}">
                {{ title }}
            </span>
            {{ if children }}
                <ul class="{{ depth == 1 ?= 'mb-4' }}">
                    {{ *recursive children* }}
                </ul>
            {{ /if }}
        </li>
    {{ /nav }}
</ul>
```
::tab blade
```blade
<ul class="nav">
  <s:nav>
    <li>
      <span @class([
        'text-gray-900 font-bold'=> $depth == 1,
        'text-gray-800 ml-3'=> $depth == 2,
        'text-gray-500 ml-6 text-sm'=> $depth == 3,
      ])>{{ $title }}</span>

      @if (count($children) > 0)
        <ul @class([
          'mb-4' => $depth == 1
        ])>
          @recursive_children
        </ul>
      @endif
    </li>
  </s:nav>
</ul>
```
::