quarto-dev / quarto-dev/quarto-cli

Wrong tab indicate as active in navbar

Open
#11,481 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug website-navigation websites
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Top navigation adds an .active class to the current page. This feature is broken in some cases, e.g. when a sidebar is used in addition to a top navbar.

This was previously discussed in #1321

Steps to reproduce

Example of problematic quarto project
Image

Contents of _quarto.yml:

project:
  type: website

website:
  title: "Navigation tabs"
  search: true
  sidebar:
    style: docked
    contents:
      - href: index.qmd
        text: Home
      - href: getting_started.qmd
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: getting_started.qmd
        text: "Getting Started"
      - about.qmd

format:
  html:
    theme: journal
    css: styles.css
    toc: true
Expected behavior

The current page should be indicated as active in the navbar.

If there is no link in the navbar, no link should be marked as active.

Actual behavior

The wrong link is marked as active.

Your environment
  • IDE: VSCode
  • OS: Linux Ubuntu 24.04
Quarto check output
quarto check

Quarto 1.5.55
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.5.55
Path: /opt/quarto/bin

[✓] Checking tools....................OK
TinyTeX: v2024.11
Chromium: (not installed)

[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /home/jan/.TinyTeX/bin/x86_64-linux
Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.12.7
Path: /home/jan/.local/bin/python3
Jupyter: 5.7.2
Kernels: julia-1.10, julia-nodeps-1.10, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
Version: 4.1.2
Path: /usr/lib/R
LibPaths:
- /home/jan/R/x86_64-pc-linux-gnu-library/4.1
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.45
rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the attached reprex and its _quarto.yml configuration, reproducing the navbar and sidebar combination described in the issue. Trace how the current page is selected for the navbar and verify the expected result: only the current page is active, and no link is active when the navbar has no matching link.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.