Setting "active" class on breadcrumbs

support
1

Is it possible to add an active class to the current (last) item in breadcrumbs? For example, if home>news or home>capital>news, then news gets an active class? Below is my code.

{{- if not .IsHome -}}
<p class="breadcrumbs">
<a href="/">Home</a> <span class="pointer">» </span>
  {{- template "breadcrumb" dict "currentPage" .Page "id" .File.UniqueID -}}
</p>
{{- end -}}
{{- define "breadcrumb" -}}
{{- $page := .currentPage -}}
 {{- if $page.Parent -}}
 {{- if ne $page.Parent .IsHome -}}
    {{- template "breadcrumb" dict "currentPage" $page.Parent -}}
  {{- end -}}
    {{- if eq .id $page -}}
      {{- $page.Title -}}
    {{- else -}}
      <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a> <span class="pointer">» </span>
    {{- end -}}
{{- end -}}
{{- end -}}
2

My requirement is to add an aria-current of page for accessibility purposes.

Edit: I am looking for a way to do it with JavaScript. Will share a solution if I find one since Hugo lacks this feature.

3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.