@visual-framework/vf-dropdown

Dropdown component

About

A dropdown component that can be used in navigation menus.

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).

Install

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack