facebook / facebook/docusaurus

dropdown navbar should render as active if one of its items are also active

Open
#9,214 19 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [ ] I have tried the `npm run clear` or `yarn clear` command.
- [ ] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).

### Description

The title is self-explanatory.

### Reproducible demo

_No response_

### Steps to reproduce

```js
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'dropdown',
label: 'Community',
position: 'left',
items: [
{
type: 'doc',
label: 'Docs',
},
{
type: 'doc',
label: 'Social',
docId: 'social',
},
],
},
],
},
},
};
```

Then open either Docs or Social.

### Expected behavior

The navbar dropdown should also be rendered as active to indicate that the user is browsing a page from within that dropdown.

### Actual behavior

The navbar parent dropdown never renders as active.

### Your environment

_No response_

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.