Add without-arrow class for navbar items (#1919)

* Add is-arrowless class for navbar items

It removes the arrow in the items of the Navbar.

Closes https://github.com/jgthms/bulma/issues/1833

* Add documentation for is-arrowless class

* Add is-arrowless to the changelog

CHANGELOG.md

@@ -7,6 +7,7 @@
 * #1884 New `$navbar-burger-color` variable
 * #1679 Add breakpoint based column gaps
 * #1905 Fix `modal` for IE11 #1902
+* #1919 New `is-arrowless` class for navbar items
 
 ### Bug fixes
 

docs/documentation/components/navbar.html

@@ -952,6 +952,68 @@ document.addEventListener('DOMContentLoaded', function () {
   </div>
 </div>
 
+
+{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
+
+{% if vernum >= 72 %}
+
+<h4 class="title is-4">
+  Dropdown without arrow
+</h4>
+
+<div class="content">
+  <p>
+    You can remove the arrow in the items of the Navbar by addind the <code>navbar-dropdown</code> class to them.
+  </p>
+</div>
+
+{% highlight html %}
+<div class="navbar-item has-dropdown is-hoverable">
+  <a class="navbar-link is-arrowless">
+    Docs
+  </a>
+  <!-- navbar-dropdowns -->
+</div>
+{% endhighlight %}
+
+{% capture navbar_dropup_without_arrow_example %}
+<div class="navbar-item has-dropdown is-hoverable">
+  <a class="navbar-link is-arrowless">
+    Link without arrow
+  </a>
+  <div class="navbar-dropdown">
+    <a class="navbar-item">
+      Overview
+    </a>
+    <a class="navbar-item">
+      Elements
+    </a>
+    <a class="navbar-item">
+      Components
+    </a>
+    <hr class="navbar-divider">
+    <div class="navbar-item">
+      Version {{ site.data.meta.version }}
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+<div class="columns">
+  <div class="column">
+    <div class="bd-example is-paddingless">
+      {{ navbar_dropup_without_arrow_example }}
+    </div>
+  </div>
+
+  <div class="column">
+    {% highlight html %}{{ navbar_dropup_without_arrow_example }}{% endhighlight %}
+  </div>
+</div>
+
+{% endif %}
+
+
 <h4 class="title is-4">
   Styles for the dropdown menu
 </h4>

sass/components/navbar.sass

@@ -198,7 +198,7 @@ a.navbar-item,
   flex-grow: 1
   flex-shrink: 1
 
-.navbar-link
+.navbar-link:not(.is-arrowless)
   padding-right: 2.5em
   &::after
     +arrow($navbar-dropdown-arrow)