apply class="active" to currently active page/section about hugo-universal-theme HOT 12 CLOSED

This actually fixes it for single-level menus:

<div class="navbar-collapse collapse" id="navigation">
  <ul class="nav navbar-nav navbar-right">
    {{ $url := .URL }}
    {{ range .Site.Menus.main }}
      <li class="{{ if eq $url .URL }}active{{ end }} {{ if .HasChildren }}dropdown{{ end }}">
        {{ if .HasChildren }}

from hugo-universal-theme.

While working on my personal theme I came across a similar issue and found this issue.
I took the code snippet from @frnco and modified it to be more universal.
It might be useful for you guys :)

My solution looks as follows:

    {{- $firstUrlElement := print "/" (index (split .URL "/") 1) "/" -}}
    {{- range .Site.Menus.main -}}
        <li><a class="{{if eq ($firstUrlElement|lower) (.URL|lower) }}active{{end}}" title="{{ .Name }}" href="{{.URL}}">{{ .Name }}</a></li>
    {{ end }}

This will return true on a first level of the menu even if the page currently visited is a subpage of that page as long as it has the same url until the first /.

from hugo-universal-theme.

Thanks @aaronlauterer I'm pretty new to Hugo and it's template structure; I honestly thought I'd have to hardcode the menu manually as Hugo's documentation on it is very confusing.

I added on to your snippet to include an active class for the homepage too (and moved the class to the li so it's more flexible):

    {{- range .Site.Menus.main -}}
        <li class="{{if or ($.IsMenuCurrent "main" .) (eq ($firstUrlElement|lower) (.URL|lower)) }}active{{end}}" title="{{ .Name }}"><a href="{{.URL}}">{{ .Name }}</a></li>
    {{ end }}

So now I can create all the top level .md's I want without dodgy hacks! yay.

from hugo-universal-theme.

		<li {{ if .IsHome }}class="active"{{ end }}><a href="{{ $baseUrl }}/">Home</a></li>
			{{ $url := .URL }}
			{{ with .Site.Menus.main }}
				{{ range $menu := . }}
					<li {{ if eq $url .URL }}class="active"{{ end }}><a href="{{ .URL }}">{{ .Name }</a>
                                        </li>
				{{ end }}
			{{ end }}
				{{ if not .Site.Params.noCategoryLink }}
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Categories<span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
						{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
							<li><a href="{{ $baseUrl }}/categories/{{ $name | urlize }}">{{ title $name }}</a></li>
						{{ end }}
						</ul>
					</li>
				{{ end }}

Would this snippet work with ours?

I'm having a brainfart on the logic of it tbh.

from hugo-universal-theme.

@GeorgeWL I'm working on this in PR #87

from hugo-universal-theme.

Anyone that's not already involved, can you give us ideas on making this work fully?

from hugo-universal-theme.

@frnco This works in both use cases without issue?

Can you be nice and make a pull request?

from hugo-universal-theme.

@GeorgeWL I can but it only works for first-level pages, i.e., blog item wouldn't be highlighted when on article page.

It's a good starting point but needs some work, I'll improve on it and send a PR as soon as I have some spare time.

from hugo-universal-theme.

We really could do with a way that works equally well for both tbh.

We just need to figure out the logic chain.

from hugo-universal-theme.

The commit by @jpvicari is nice! But it still lacks proper sub-level highlighting support for certain corner cases. Namely for /categories/* and /tags/* pages the "blog" menu item (posts or whatever one names it) should be highlighted, too.

UPDATE:

The following is the best I could come up with (not a Hugo expert):

<li class="dropdown{{ if eq $current.RelPermalink .URL | or (eq $current.Type $topLevel) | or (and (eq .Name "[NAME_OF_YOUR_BLOG_MENU_ENTRY]") (in (slice "taxonomy" "taxonomyTerm") $current.Kind)) }} active{{ end }}">

Also note my comment about the deprecated use of Page's .URL

UPDATE 2:

I think I came up with a reasonable solution by making use of the menu identifer key. I will submit a corresponding pull request as soon as I have time.

from hugo-universal-theme.

I've just submitted a PR to improve the navigation highlighting: #211

from hugo-universal-theme.

I closed because is resolved on the latest theme version.

from hugo-universal-theme.