aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/tests/unit/tab.spec.js10
-rw-r--r--scss/_nav.scss2
-rw-r--r--site/content/docs/5.0/components/navbar.md8
-rw-r--r--site/content/docs/5.0/components/navs.md32
4 files changed, 27 insertions, 25 deletions
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 8bf172d10..a08fec20d 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -470,15 +470,15 @@ describe('Tab', () => {
it('should handle nested tabs', done => {
fixtureEl.innerHTML = [
'<nav class="nav nav-tabs" role="tablist">',
- ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
- ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
- ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
+ ' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
+ ' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
+ ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
'</nav>',
'<div class="tab-content">',
' <div class="tab-pane" id="x-tab1" role="tabpanel">',
' <nav class="nav nav-tabs" role="tablist">',
- ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
- ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
+ ' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
+ ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
' </nav>',
' <div class="tab-content">',
' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>',
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 60ad27a55..84d522405 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -92,6 +92,7 @@
//
.nav-fill {
+ > .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
@@ -99,6 +100,7 @@
}
.nav-justified {
+ > .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index bf11527e0..d93d37dc1 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -168,10 +168,10 @@ And because we use classes for our navs, you can avoid the list-based approach e
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
- <a class="nav-item nav-link active" aria-current="page" href="#">Home</a>
- <a class="nav-item nav-link" href="#">Features</a>
- <a class="nav-item nav-link" href="#">Pricing</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ <a class="nav-link" href="#">Features</a>
+ <a class="nav-link" href="#">Pricing</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md
index ba8290242..f05a5763d 100644
--- a/site/content/docs/5.0/components/navs.md
+++ b/site/content/docs/5.0/components/navs.md
@@ -187,14 +187,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif
</ul>
{{< /example >}}
-When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+When using a `<nav>`-based navigation.
{{< example >}}
<nav class="nav nav-pills nav-fill">
- <a class="nav-item nav-link active" aria-current="page" href="#">Active</a>
- <a class="nav-item nav-link" href="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" aria-current="page" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -217,14 +217,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
</ul>
{{< /example >}}
-Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+Similar to the `.nav-fill` example using a `<nav>`-based navigation.
{{< example >}}
<nav class="nav nav-pills nav-justified">
- <a class="nav-item nav-link active" aria-current="page" href="#">Active</a>
- <a class="nav-item nav-link" href="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" aria-current="page" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example">
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
@@ -381,9 +381,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
{{< highlight html >}}
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 02:59:54 +0000