twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Home Page:https://getbootstrap.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Active nav links with default style look inactive

willfaught opened this issue · comments

Prerequisites

Proposal

Seen here, active nav links with no tab, pill, or underline style look the same as inactive ones:

Screenshot 2024-04-08 at 11 41 39 PM

However, active nav links with tab, pill, and underline styles look different than inactive ones:

Screenshot 2024-04-08 at 11 41 59 PM

Screenshot 2024-04-08 at 11 42 10 PM

Screenshot 2024-04-08 at 11 42 21 PM

It would be useful if the unstyled active nav links looked different than inactive ones, in a similar way. Perhaps a dark font color for light mode, and a light font color for dark mode, similar to the tab and underline styles? And a bold font weight, like with the underline style?

Also, looking at these screenshots now, it's strange to me that with the underline style, the links are closer together. Could the spacing for that style be made consistent with that of the other styles? Happy to make a separate issue if needed.

Motivation and context

Consistency with other nav styles. Clarity of which nav link is active.

There's no active on the base .nav on purpose. See https://getbootstrap.com/docs/5.3/components/navs-tabs/#base-nav.

Also, looking at these screenshots now, it's strange to me that with the underline style, the links are closer together. Could the spacing for that style be made consistent with that of the other styles? Happy to make a separate issue if needed.

I feel like the underline style is space nicely, but you're more than welcome to put up a PR that changes it to what your more comfortable with and we can try it out!

There's no active on the base .nav on purpose. See https://getbootstrap.com/docs/5.3/components/navs-tabs/#base-nav.

But there is on the

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

example, and it has the same look.

I feel like the underline style is space nicely, but you're more than welcome to put up a PR that changes it to what your more comfortable with and we can try it out!

Wouldn't we need this issue to be open to justify the PR?