# Active Nav Items

**URL:** <https://forum.bootstrapstudio.io/t/active-nav-items/9760>\
**Category:** Bootstrap Studio Help\
**Created:** [December 27, 2022, 8:11pm UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760 "2022-12-27T20:11:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tamineff](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ea666f/32.png) [@tamineff](https://forum.bootstrapstudio.io/u/tamineff)\
**Post date:** [December 27, 2022, 8:11pm UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/1 "2022-12-27T20:11:52Z")

</div>

I’ve looked and I can’t find something that addresses this (or if I did see an answer, I didn’t recognize it). I have a linked Navbar and when I set Active status in index.html - it changes it for all pages except the ones for which I’m using a Dropdown. If I go and change another page, it changes it in index.html (and all other pages) as well.

What am I doing wrong?

Thank you!  
Tami

---

<div class="post-metadata">

**Author:** ![twinstream](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ecae2f/32.png) [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)\
**Post date:** [December 28, 2022, 5:06am UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/2 "2022-12-28T05:06:41Z")

</div>

Here is a example. It highlights both the nav-link and nav-item too.

[Navbar Dropdown with highlighted select](https://menubybootstrap.bss.design/index.html)

You may want to read this post

[forum post](https://forum.bootstrapstudio.io/t/smart-active-state-incorrectly-marks-drop-down-menu-item-as-active/5235)

The script is different for posting to BSS **Publish** vs **Export and ftp**. _(“+ 0” vs “+ 1”)_

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [December 28, 2022, 9:15am UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/3 "2022-12-28T09:15:01Z")

</div>

You can make you own smartActive script like this  
It highlights the dropdowns as well

```javascript
const smartActive = () => {
  let url = location.pathname;
  let _smartActve = url.substring(url.lastIndexOf('/'));
  _smartActve = _smartActve.replace('/', '');
  if (_smartActve === '') _smartActve = 'index.html';
  const target = document.querySelector(`a[href="${_smartActve}"]`);
  if (target) {
    target.classList.add('active');
    if (target.parentElement.classList.contains('dropdown-menu')) {
      target.parentElement.parentElement.firstChild.classList.add('active');
    }
  }
};

document.addEventListener('readystatechange', smartActive, false);

```

The script works when preview or export, no need to change the script  
Works without **jQuery**

---

<div class="post-metadata">

**Author:** ![tamineff](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ea666f/32.png) [@tamineff](https://forum.bootstrapstudio.io/u/tamineff)\
**Post date:** [December 28, 2022, 10:58am UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/4 "2022-12-28T10:58:19Z")

</div>

Thank you! I really appreciate the example! Happy New Year . . . Tami

---

<div class="post-metadata">

**Author:** ![tamineff](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ea666f/32.png) [@tamineff](https://forum.bootstrapstudio.io/u/tamineff)\
**Post date:** [December 28, 2022, 10:59am UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/5 "2022-12-28T10:59:31Z")

</div>

Thank you! I really appreciate an example that will show me how it’s done correctly! Happy New Year . . . Tami

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [December 28, 2022, 12:34pm UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/6 "2022-12-28T12:34:56Z")

</div>

I recently posted a question about this EXACT thing because I was trying to understand why BSS provides a link in the dropdown, when adding a URL does nothing.

> [@Nav "active" status](https://forum.bootstrapstudio.io/t/nav-active-status/8121/16):
>
> As I was playing around with the Navbar and the Dropdown tonight, something occurred to me… When you add a Dropdown to the Navbar, if you go to the Options panel, and select the Link in the Dropdown, you are presented with the standard Nav Item Link Options, which allows you to enter a URL. Of course, if you do enter a URL, clicking the Dropdown Link doesn’t take you to that URL, it opens the Dropdown menu - which is the expected behavior. So I started thinking, “why does the Dropdo…

---

<div class="post-metadata">

**Author:** ![twinstream](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ecae2f/32.png) [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)\
**Post date:** [December 28, 2022, 2:39pm UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/7 "2022-12-28T14:39:16Z")

</div>

I would use [kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten) script as it does not require jquery. You would then just style accordingly.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [December 28, 2022, 2:49pm UTC](https://forum.bootstrapstudio.io/t/active-nav-items/9760/8 "2022-12-28T14:49:45Z")

</div>

> **[smartActive](https://smart-active.bss.design/)**
>
> Example of a smartActive script for dropdowns and pages in subfolders