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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7452f219a4625a2d582983daa562f0f0cbeaa749..7acd90aa3e5bc9b5995e0badd4200fd5f56847ef 100644 (file)
--- a/CHANGELOG.md
+++ b/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
 

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 0393ac63e302308320c6789ccb20ee2ac9c45fd1..b82097e39265e90a395ddf6b4e4b95abe0e728de 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/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>

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 407fd2c5370fc401e6accb2f6d6d07f6aca3431a..1e0a7e1e831fdbfa073f0d7eceaf90e299d8aae7 100644 (file)
--- a/sass/components/navbar.sass
+++ b/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)