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

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
 

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" %}

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