Fix #998

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### Issues closed
 
+* #998 `.navbar-dropdown` with **right** alignment
 * #877 `.pagination` isn't using `$pagination-background`
 * #989 `navbar-brand` overflowing on mobile
 * #975 Variable `$table-head-color` isn't used

docs/css/bulma-docs.css

@@ -6258,6 +6258,10 @@ a.navbar-item:hover, a.navbar-item.is-active,
     transition-property: opacity, transform;
     transition-property: opacity, transform, -webkit-transform;
   }
+  .navbar-dropdown.is-right {
+    left: auto;
+    right: 0;
+  }
   .navbar-divider {
     display: block;
   }

docs/documentation/components/navbar.html

@@ -215,6 +215,12 @@ variables:
 </nav>
 {% endcapture %}
 
+{% capture navbar_dropdown_hover_snippet %}
+<div class="navbar-item has-dropdown is-hoverable">
+  <!-- navbar-link, navbar-dropdown etc. -->
+</div>
+{% endcapture %}
+
 {% capture navbar_dropdown_hover_example %}
 <nav class="navbar">
   <div class="navbar-item has-dropdown is-hoverable">
@@ -241,6 +247,12 @@ variables:
 </nav>
 {% endcapture %}
 
+{% capture navbar_dropdown_active_snippet %}
+<div class="navbar-item has-dropdown is-active">
+  <!-- navbar-link, navbar-dropdown etc. -->
+</div>
+{% endcapture %}
+
 {% capture navbar_dropdown_active_example %}
 <nav class="navbar">
   <div class="navbar-item has-dropdown is-active">
@@ -267,6 +279,77 @@ variables:
 </nav>
 {% endcapture %}
 
+{% capture navbar_dropdown_right_snippet %}
+<div class="navbar-dropdown is-right">
+  <!-- navbar-item, navbar-divider etc. -->
+</div>
+{% endcapture %}
+
+{% capture navbar_dropdown_right_example %}
+<nav class="navbar">
+  <div class="navbar-menu">
+    <div class="navbar-start">
+      <div class="navbar-item has-dropdown is-active">
+        <a class="navbar-link">
+          Left
+        </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.version }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item has-dropdown is-active">
+        <a class="navbar-link">
+          Right
+        </a>
+
+        <div class="navbar-dropdown is-right">
+          <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.version }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<section class="hero is-primary">
+  <div class="hero-body">
+    <p class="title">
+      Documentation
+    </p>
+    <p class="subtitle">
+      Everything you need to <strong>create a website</strong> with Bulma
+    </p>
+  </div>
+</section>
+{% endcapture %}
+
 {% capture navbar_dropdown_default_example %}
 <nav class="navbar">
   <a class="navbar-item">
@@ -514,9 +597,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_example}}{% endhighlight %}
 
-    <hr>
+    {% include heading.html name="Navbar brand" %}
-
-    <h3 class="title">Navbar brand</h3>
 
     <div class="content">
       <p>
@@ -552,9 +633,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    <hr>
+    {% include heading.html name="Navbar burger" %}
-
-    <h3 class="title">Navbar burger</h3>
 
     <div class="content">
       <p>
@@ -586,9 +665,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Navbar menu" %}
-
-    <h3 class="title">Navbar menu</h3>
 
     <div class="content">
       <p>
@@ -639,9 +716,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Navbar start and navbar end" %}
-
-    <h3 class="title">Navbar start and navbar end</h3>
 
     <div class="content">
       <p>
@@ -665,9 +740,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
 
-    <hr>
+    {% include heading.html name="Navbar item" %}
-
-    <h3 class="title">Navbar item</h3>
 
     <div class="content">
       <p>
@@ -717,9 +790,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </ul>
     </div>
 
-    <hr>
+    {% include heading.html name="Transparent navbar" %}
-
-    <h3 id="transparent-navbar" class="title">Transparent navbar</h3>
 
     <div class="content">
       <p>
@@ -733,9 +804,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
 
-    <hr>
+    {% include heading.html name="Dropdown menu" %}
-
-    <h3 id="dropdown-menu" class="title">Dropdown menu</h3>
 
     <div class="content">
       <p>
@@ -793,6 +862,8 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
+    {% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
+
     <div class="columns">
       <div class="column">
         <div class="example is-paddingless">
@@ -805,6 +876,8 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
+    {% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
+
     <div class="columns">
       <div class="column">
         <div class="example is-paddingless">
@@ -817,6 +890,31 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
+    <h4 class="title is-4">
+      Right dropdown
+      <span class="tag is-info">0.5.1</span>
+    </h4>
+
+    <div class="content">
+      <p>
+        If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
+      </p>
+    </div>
+
+    {% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
+
+    <div class="columns">
+      <div class="column">
+        <div class="example is-paddingless">
+          {{ navbar_dropdown_right_example }}
+        </div>
+      </div>
+
+      <div class="column">
+        {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
+      </div>
+    </div>
+
     <h4 class="title is-4">
       Styles for the dropdown menu
     </h4>

sass/components/navbar.sass

@@ -226,6 +226,9 @@ a.navbar-item,
       transform: translateY(-5px)
       transition-duration: $speed
       transition-property: opacity, transform
+    &.is-right
+      left: auto
+      right: 0
   .navbar-divider
     display: block
   .container > .navbar