Add feature: is-expanded to navbar-item (#1320)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a45eb972c821a81d3b9f96357e772aa73abf5d0..cca236fbcfdae84c9693c9ae7b9900a734782db8 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
 * 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
 * 🎉 #1287 New `.is-invisible` helper
+* 🎉 #1255 New `.is-expanded` modifier for `navbar-item`
 
 ### Improvements
 

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 4a9576a4c0289ec33ca69a2cb3daa9eb49e73d19..eb04bd240f7856829b324221fad1265fdb75dfe9 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -736,6 +736,9 @@ document.addEventListener('DOMContentLoaded', function () {
           <code>navbar-dropdown</code>
         </li>
       </ul>
+      <p>
+        You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
+      </p>
     </div>
 
     {% include anchor.html name="Transparent navbar" %}

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 2910772a9dd5cc71f8df6be1cf586678e506768a..7f9c2af3eb69758c7bb2f136ec9c23630a16e159 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -130,6 +130,9 @@ a.navbar-item,
     max-height: $navbar-item-img-max-height
   &.has-dropdown
     padding: 0
+  &.is-expanded
+    flex-grow: 1
+    flex-shrink: 1
   &.is-tab
     border-bottom: 1px solid transparent
     min-height: $navbar-height