Frontend Prototype
Flyout
Examples
Use Buttons for Triggers
It is good practise to place a (hidden) close link at the end of the flyout.
Please note that we'll close when elements have attribute data-flyout-el="close".
Left, right, up, down
We let users focus buttons and links using the keys, even to right and left.
Flyout of Flyout
A flyout can open a flyout.
Options
You can set options in the "data-flyout" attribute on either the flyout or its trigger.
Disable FocusInside
By default we're gonna set focus on the first element that contains text. You may disable this altogether.
{focusInside: false}
Focus inside fixed element
{focusInside: '#search'}
Disable Arrow Elements
{arrowElements: false}
Closables
Default [data-flyout-el="close"]
{closeElements: '[data-close]'}
Hover Behaviour
{triggerBehaviour: 'hover'}