Dropdown

Create simple toggleable submenu.

</> Show code

Basic dropdown#

The dropdown is working with a .dropdown class on an element. To trigger it, you have to add a .data-target refering to the dropdown element inside of it.
The dropdown is working with our color palette. 

<div class="dropdown" id="example-dropdown" data-ax="dropdown">
  <button type="button" class="btn rounded-1 primary" data-target="example-dropdown">
    Toggle
  </button>

  <div class="dropdown-content white shadow-1 rounded-1">
    <a class="dropdown-item" href="#">This is the first item</a>
    <a class="dropdown-item" href="#">Item 2</a>
    <a class="dropdown-item active" href="#">Item 3</a>
  </div>
</div>

Right aligned dropdown content#

To align your dropdown content with the right border of the dropdown trigger, you just have to add the .dropdown-right class on your .dropdown-content. 

<div class="d-flex">
  <div class="dropdown ml-auto" id="example-dropdown" data-ax="dropdown">
    <button type="button" class="btn rounded-1 primary" data-target="example-dropdown">
      Toggle
    </button>

    <div class="dropdown-content white dropdown-right shadow-1 rounded-1">
      <a class="dropdown-item" href="#">Right aligned dropdown</a>
      <a class="dropdown-item" href="#">Item 2</a>
    </div>
  </div>
</div>

Constrain width#

To constrain the width of the dropdown content to fit the dropdown trigger width, just add the .dropdown-constrain-width class to your .dropdown-content element. 

<div class="dropdown" id="example-dropdown" data-ax="dropdown">
  <button type="button" class="btn rounded-1 primary" data-target="example-dropdown">
    Toggle
  </button>

  <div class="dropdown-content white dropdown-constrain-width shadow-1 rounded-1">
    <a class="dropdown-item" href="#">Constrain width option</a>
    <a class="dropdown-item" href="#">Item 2</a>
  </div>
</div>

A dropdown is easily usable inside a navbar, using a .navbar-link as a dropdown trigger. 

<nav class="navbar shadow-1 primary">
  <a href="#" target="_blank" class="navbar-brand">Axentix</a>

  <div class="navbar-menu ml-auto">
    <div class="dropdown" id="example-dropdown" data-ax="dropdown">
      <div class="navbar-link active" data-target="example-dropdown">
        Toggle
      </div>
      <div class="dropdown-content dropdown-right white shadow-1">
        <a class="dropdown-item" href="#">Dropdown in navbar</a>
        <a class="dropdown-item" href="#">Item 2</a>
        <a class="dropdown-item active" href="#">Item 3</a>
      </div>
    </div>

    <a class="navbar-link" href="#">Link 2</a>
    <a class="navbar-link" href="#">Link 3</a>
  </div>
</nav>

Animated dropdown#

The animationType option is activable through the JS initialization. the 'fade' one is creating a smooth fade in animation of the dropdown content.
Note that this option is not working with the hover option. 

<div class="dropdown" id="example-dropdown" data-ax="dropdown" data-dropdown-animation-type="fade">
  <button type="button" class="btn rounded-1 primary" data-target="example-dropdown">
    Toggle
  </button>

  <div class="dropdown-content white shadow-1 rounded-1">
    <a class="dropdown-item" href="#">Fade animation</a>
    <a class="dropdown-item" href="#">Item 2</a>
  </div>
</div>

JavaScript initialization#

Once HTML was setup, you can activate the dropdown with this simple code.
Just pass the id of your dropdown that you want to activate. 

// NOTE: this is NOT to be used if data-ax="dropdown" is set in your HTML
let exampleDropdown = new Axentix.Dropdown('#example-dropdown');

// With options
let exampleDropdown = new Axentix.Dropdown('#example-dropdown', {
  animationType: 'fade'
});
To know all the ways to initialize a JS component, please read the JS Init page.

Options#

Property Default value Description
hover false Dropdown shown when hover event is triggered instead of click event.
animationType 'none' Choose animation type when dropdown is opened or closed.
Accepted values are 'none' or 'fade'.
animationDuration 300 Opening and closing animation duration in ms.
autoClose true Closes other dropdown when this Dropdown instance is opened.
closeOnClick true Closes the dropdown by clicking outside of it.
preventViewport false Prevent dropdown content to exceed viewport size.

Methods#

// NOTE: this is NOT to be used if data-ax="dropdown" is set in your HTML
let exampleDropdown = new Axentix.Dropdown('#example-dropdown');

// Syntax : exampleDropdown.{method}
exampleDropdown.close();
Method Description
.open() Open dropdown
.close() Close dropdown

Events#

// Listen to all dropdown instances
document.addEventListener('ax.dropdown.open', function() {
  // open event !
});

// Listen to only one dropdown instance
let dropdownQuery = document.querySelector('#example-dropdown');
dropdownQuery.addEventListener('ax.dropdown.open', function() {
  // open event only on #example-dropdown
});
Event Description
ax.dropdown.setup Event sent when the dropdown has been setup.
ax.dropdown.open Event sent when the open() method is called.
ax.dropdown.opened Event sent when the dropdown has been opened.
ax.dropdown.close Event sent when the close() method is called.
ax.dropdown.closed Event sent when the dropdown has been closed.

Styling#

CSS Variable Default value Description
--ax-dropdown-z-index 10 Dropdown z-index.
--ax-dropdown-z-index-navbar 20 Dropdown z-index inside a navbar.
--ax-dropdown-z-index-sidenav 30 Dropdown z-index inside a sidenav.