diff --git a/docs/components/navs.md b/docs/components/navs.md index 3552b9125827..f007635ab394 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -142,6 +142,30 @@ Just add `.nav-stacked` to the `.nav.nav-pills`. {% endexample %} +## Justified navs + +Just add `.nav-justified` to the `.nav.nav-tabs` or `.nav.nav-pills`. Easily make tabs or pills equal widths of their parent at screens wider than 768px with `.nav-justified`. On smaller screens, the nav links are stacked. Justified navbar nav links are currently not supported. + +### Safari and responsive justified navs +As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the [justified nav example](../examples/justified-nav/). + +{% example html %} +
+{% endexample %} + ## Using dropdowns Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage). diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 934769fdcdd0..630cfb9209ec 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -36,6 +36,7 @@ @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; +@import "mixins/nav"; @import "mixins/nav-divider"; @import "mixins/forms"; @import "mixins/progress"; diff --git a/scss/_nav.scss b/scss/_nav.scss index 4efed45b6228..fbddf31223ad 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -149,6 +149,14 @@ } } +// +// Justified +// + +.nav-justified { + @include nav-justified; + @include nav-tabs-justified; +} // // Dropdowns diff --git a/scss/_variables.scss b/scss/_variables.scss index 88afa3ccd329..5957257e1d58 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -399,6 +399,9 @@ $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-border-color: #ddd !default; $nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-radius: $border-radius !default; +$nav-tabs-justified-link-border-width: $border-width !default; +$nav-tabs-justified-link-margin-bottom: 5px !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; $nav-pills-border-radius: $border-radius !default; diff --git a/scss/mixins/_nav.scss b/scss/mixins/_nav.scss new file mode 100644 index 000000000000..24ef04f8bd08 --- /dev/null +++ b/scss/mixins/_nav.scss @@ -0,0 +1,62 @@ +// Justified nav links +// ------------------------- + +@mixin nav-justified { + width: 100%; + + .nav-item { + float: none; + } + + .nav-link { + margin-bottom: $nav-tabs-justified-link-margin-bottom; + text-align: center; + } + + .dropdown .dropdown-menu { + top: auto; + left: auto; + } + + @include media-breakpoint-up(md) { + .nav-item { + display: table-cell; + width: 1%; + } + .nav-link { + margin-bottom: 0; + } + } +} + +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +@mixin nav-tabs-justified { + border-bottom: 0; + + .nav-link { // Override margin from .nav-tabs + margin-right: 0; + @include border-radius($nav-tabs-justified-link-border-radius); + } + + .nav-link.active { + @include plain-hover-focus { + border: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color; + } + } + + @include media-breakpoint-up(md) { + .nav-link, + .nav-link.disabled, + .nav-link.disabled:hover { + border-bottom: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color; + @include border-top-radius($nav-tabs-justified-link-border-radius); + } + .nav-link.active { + @include plain-hover-focus { + border-bottom-color: $nav-tabs-justified-active-link-border-color; + } + } + } +}