Skip to the main content


DropdownMenuView

A Backbone view that renders a fully accessible dropdown menu.

Initialize the view by passing in the following attributes:

view = new DropdownMenuView({
    className: 'space separated string of classes for element',
    model: new Backbone.Model({
        main: {
            image: 'http://placehold.it/40x40',
            screenreader_label: 'Dashboard for: ',
            text: 'username',
            url: 'dashboard'
        },
        button: {
            icon: 'icon-angle-down',
            label: 'User options dropdown'
        },
        items: [
            {
                text: 'Account',
                url: 'account_settings'
            }, {
                text: 'Sign Out',
                url: 'logout'
            }
        ]
    }),
    parent: 'selector for parent element that will be replaced with dropdown menu',
    ...
});

Function to track analytics.

By default it doesn’t do anything, to utilize please extend the View and implement a method such as the following:

var $link = $(event.target),
    label = $link.hasClass('menu-title') ? 'Dashboard' : $link.html().trim();

window.analytics.track('user_dropdown.clicked', {
    category: 'navigation',
    label: label,
    link: $link.attr('href')
});

Parameters

event: object, The event to be tracked.

Returns: *, The event.