alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Dropdown block

A dropdown component that can be used in navigation menus.

github location npm version

Usage

Supports click trigger to open. User can select menu item or click outside menu to close it. When menu is open, outside clicks will be captured by menu.

Currently, usage intended with navigation menu. Component is based on the Example Disclosure Navigation Menu of the ARIA Authoring Practices Guide (APG).

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "label": "John doe",
  "width": "14rem",
  "labelAlign": "left",
  "menuItems": [
    {
      "text": "Profile",
      "link_href": "JavaScript:Void(0);"
    },
    {
      "text": "Settings",
      "link_href": "JavaScript:Void(0);"
    },
    {
      "text": "Logout",
      "link_href": "JavaScript:Void(0);"
    }
  ]
}
 %}
{% include "../path_to/vf-dropdown/vf-dropdown.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-dropdown', {
  "component-type": "block",
  "label": "John doe",
  "width": "14rem",
  "labelAlign": "left",
  "menuItems": [
    {
      "text": "Profile",
      "link_href": "JavaScript:Void(0);"
    },
    {
      "text": "Settings",
      "link_href": "JavaScript:Void(0);"
    },
    {
      "text": "Logout",
      "link_href": "JavaScript:Void(0);"
    }
  ]
} %}
                
HTML
<div class="vf-dropdown" data-vf-js-dropdown style="width:14rem">
  <div class="vf-dropdown__label-container">
    <div class="vf-dropdown__label" style="text-align: left">John doe</div>
    <div>
      <svg aria-hidden="true" class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16">
        <g transform="matrix(0.6666666666666666,0,0,0.6666666666666666,0,0)">
          <path d="M12,19.5a2.34,2.34,0,0,1-1.73-.78L.46,7.57A1.85,1.85,0,1,1,3.23,5.13l8.58,9.75a.25.25,0,0,0,.38,0l8.58-9.75a1.85,1.85,0,1,1,2.77,2.44L13.73,18.72A2.34,2.34,0,0,1,12,19.5Z" style="fill: #000000"></path>
        </g>
      </svg>
    </div>
  </div>
  <div class="vf-dropdown__menu-container">
    <div class="vf-dropdown-overlay"></div>
    <div class="vf-dropdown__menu">
      <div class="vf-dropdown__menu-item">
        <a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Profile</a>
      </div>
      <div class="vf-dropdown__menu-item">
        <a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Settings</a>
      </div>
      <div class="vf-dropdown__menu-item">
        <a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Logout</a>
      </div>
    </div>
  </div>
</div>
              

Examples

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-dropdown with this command.

$ yarn add --dev @visual-framework/vf-dropdown

JS

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfDropdown } from 'vf-dropdown/vf-dropdown';
// Or import directly
// import { vfDropdown } from '../components/raw/vf-dropdown/vf-dropdown.js';
vfDropdown(); // invoke it

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-dropdown/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.0.0-alpha.7

  • Feat: Add keyboard navigation
  • https://github.com/visual-framework/vf-core/issues/1754

1.0.0-alpha.6

  • Fix: Make the whole dropdown area clickable
  • https://github.com/visual-framework/vf-core/issues/1756

1.0.0-alpha.4

  • Use new interactive colour token.
  • https://github.com/visual-framework/vf-core/issues/1688

1.0.0-alpha.3

Assets



File system location: components/vf-dropdown

Find an issue on this page? Propose a change or discuss it.