Top

Usage

Generation of flyout menus require a nested JSON structure of pages found within a website, usually akin to a sitemap. Each item in the data set requires a title, an optional URL, and a list of children.

{
    title: 'Home',
    url: '/',
    children: [
        {
            title: 'News',
            url: '/news',
        }, {
            title: 'Users',
            url: '/users',
            children: [
                ...
            ]
        }
    ]
}

The top level object will always be the root index or home page, while all other pages will be nested within children. For the flyout to function correctly, the data set is required during initialization. This can be accomplished by providing a URL that returns a JSON response as the 1st argument. Options are passed as the 2nd argument.

$('.js-flyout a').flyout('/sitemap');

The flyout component must be initialized on an element that returns a target URL. This URL determines the list of items to display in the flyout menu by looking through the data set listed above. A great use case for flyouts is binding them to links within a breadcrumb.

<nav class="breadcrumb js-flyout">
    <ol>
        <li><a href="/">Home <span class="caret">/</span></a></li>
        <li><a href="/users">Users <span class="caret">/</span></a></li>
        <li><a href="/users/search">Search <span class="caret">/</span></a></li>
    </ol>
</nav>

Now anytime we hover (or click depending on configuration) an anchor link within the breadcrumb, a flyout menu will appear for all items found within that URL. If we use the example data above, hovering over Home will display a menu with News and Users, while hovering over Users will display all items within its children, so on and so forth.

Headers

To group items with an unlinkable header, simply pass in an item with no URL.

{
    title: 'Group'
}

Which in turn, will produce a heading within the menu.

<li class="flyout-heading">
    <span>Group</span>
</li>

Data Structure

The following fields are available for each item in the data set.

Field Type Default Description
title string The title for the item within the menu.
url string The URL to link an item to. If no URL is provided, a heading is created.
icon string .caret-right The class name to apply to the icon used to indicate a nested menu.
className string The class name to apply to the parent li.
attributes object An object of HTML attributes to set on the item.

Notes

  • Top level menus will have an .is-root class.
  • Nested menus will have an .has-children class on the parent li.
  • If a menu extends outside the viewport, a .push-left class will be applied to shift it in the opposite direction.
Top

ARIA

The menu and menuitem roles, and the appropriate aria-* attributes are required when supporting ARIA.

The JavaScript component will automatically map all ARIA attributes.
Top

Variables

Variable Default Description
$flyout-class .flyout CSS class name for the flyout wrapper.
$flyout-class-heading .flyout-heading CSS class name for the flyout heading element.
$flyout-transition .3s The transition time for menu fade and nested menu slide animations.
$flyout-zindex 600 The z-index for the flyout element.
Top

Options

Inherits all options from the parent Component.

Option Type Default Description
getUrl string|function href If a string is passed, fetch the URL from the HTML attribute. If a function is passed, use the return value as the URL. The URL should match an index in the JSON response.
headingTemplate string <li class="flyout-heading"></li> The heading markup for list items.
hideDelay int 1000 The delay in milliseconds before the flyout is hidden.
itemLimit int 15 The number of items per list in a flyout menu.
mode string hover The type of interaction for displaying a flyout. Accepts click or hover.
showDelay int 350 The delay in milliseconds before the flyout is displayed.
template string <div class="flyout" data-flyout-menu></div> The flyout markup. The data-flyout-menu is required.
wrapperClass string flyouts The class name to set on the composite wrapper.
xOffset int 0 The offset in pixels to move the flyout along the X axis.
yOffset int 0 The offset in pixels to move the flyout along the Y axis.
Top

Events

Inherits all events from the parent Component.

Event Arguments Description
hideChild element:parent Triggered when a nested flyout menu is hidden. The parent li is passed as an argument.
showChild element:parent Triggered when a nested flyout menu is shown. The parent li is passed as an argument.
Top

Properties

Inherits all properties from the parent Component.

Property Type Description
data json The raw JSON response from the initial AJAX request.
dataMap object A mapping of data objects indexed by URL.
timers object A mapping of show and hide timers.
url string The current URL being used for display.
Top

Methods

Inherits all methods from the parent Component.

Method Description Bound To
load(data) Load data into the flyout and create a mapping by URL. This method is automatically triggered through the initial AJAX request.
show() Show the flyout defined by the current node URL. selector