1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "items": [
    {
      "text": "Course Selection"
    },
    {
      "text": "Degree Requirements",
      "current": true
    },
    {
      "text": "Dual Degrees",
      "items": [
        {
          "text": "Item One"
        },
        {
          "text": "Item Two"
        },
        {
          "text": "Item Three"
        }
      ]
    },
    {
      "text": "Cross-Registration"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<nav class="m-detail-nav" aria-label="{{ label | default("Detail Navigation") }}">
	<ul>
		{% for item in items %}
			<li>
				<a href="{{ item.href }}" class="m-detail-nav__item {{ item.current ? 'm-detail-nav__item--current' }}" {% for attr, value in item.attributes %} {{attr}}="{{value}}" {% endfor %}>{{ item.text }}</a>
				{% if item.items %}
					<ul>
						{% for item in item.items %}
							<li>
								<a href="{{ item.href }}" class="m-detail-nav__sub-item {{ item.current ? 'm-detail-nav__sub-item--current' }}" {% for attr, value in item.attributes %} {{attr}}="{{value}}" {% endfor %}>{{ item.text }}</a>
							</li>
						{% endfor %}
					</ul>
				{% endif %}
			</li>
		{% endfor %}
	</ul>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.m-detail-nav {
  margin-top: -16px;

  a {
    @include link-focus;
  }

  &__item {
    @include f-ui-1;
    margin-top: 16px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    & > * {
      width: 100%;
    }

    &:before {
      top: 12px;
    }
  }

  &__sub-item {
    display: block;
    position: relative;
    @include f-ui-2;
    color: var(--color--text--aux);
    margin-top: 8px;

    &::before {
      top: 12px;
    }
  }

  &__item,
  &__sub-item {
    &:before {
      content: "";
      position: absolute;
      right: calc(100% + 12px);
      border-top-width: 1px;
      border-top-color: var(--color--rules--primary);
      opacity: 0;
      transform: translateX(-12px);
      transition: opacity $timing--short $bezier--standard,
        transform $timing--short $bezier--standard;
      @each $name, $point in $breakpoints {
        @include breakpoint("#{$name}") {
          left: (map-get($outer-gutters, $name) * -1);
        }
      }
    }
  }

  &__item,
  &__sub-item {
    &--current:before,
    &:hover:before {
      opacity: 1;
      transform: none;
    }
  }
}