Breadcrumb navigation with arrow

support
1

I see https://gohugo.io/content-management/sections/#example-breadcrumb-navigation

But how does put an arrow to demark the hierarchy?

image

My attempt here has a leading arrow: https://github.com/kaihendry/netlify-cms-testing/commit/2ba5599d3a3f79a572597439337ca144bc6a864e

2

Maybe https://developer.mozilla.org/en-US/docs/Web/CSS/::after.

3

Hello. How do you do?

arrows
arrows863×388 16.2 KB 

<section>
<div class="bread-container shadow">
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ $.Scratch.Add "path" .Site.BaseURL }}
<ol class="breadcrumbs">
<li>You are Here: </li>
  <li><a href="/">home</a></li>
  {{ range $index, $element := split $url "/" }}
    {{ $.Scratch.Add "path" $element }}
      {{ if ne $element "" }}
      <li>&rarr; <a href='{{ $.Scratch.Get "path" }}'>{{ . }}</a></li>
      {{ $.Scratch.Add "path" "/" }}
      {{ end }}
  {{ end }}
</ol>
</div>
</section>

You can do something like this perhaps?

4

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