quarto-dev / quarto-dev/quarto-cli
Wrong tab indicate as active in navbar
Nobody has claimed this yet.
- 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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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