Flyout

What is a Flyout?

A Flyout component is a way of presenting a navigable menu hierarchy. When menu items are selected that have submenus, it displays the submenu by expanding the component out to the right, while still displaying the 'parent' menu item.

When and why?

A Flyout component is similar to a Drilldown, but displays the information in a different manner. It is useful when a user needs to choose a destination from multiple categories that have subcategories – e.g. looking for a specific user which can be found by going through their Organisation, Department and Line Manager. Each of those categories would be a separate 'parent' submenu.

Only an item without any submenus would take the user to an eventual destination. Items without a submenu will not move the user from their current page within the product, which will persist until the user chooses a destination item.

Flyout types

The following Flyout types are available:

Flyout properties

Flyouts have the following properties:

Using a Flyout

Navigating the Flyout

Menu items in a Flyout perform one of two functions: 'parents' that contain submenus and are selected to cause another submenu to 'fly out', or 'destinations' that act as a navigation element to take a user to a new location.

When a 'parent' menu item is selected, it will open a submenu that contains further 'parent' or 'destination' menu items. The submenu will expand out to the right, while still displaying the original menu. 'Parent' menu items are indicated by an icon of an arrow pointing to the right.

Unlike a Drilldown, 'parent' items do not need a back button. The user can simply select a new submenu from a higher level in the hierarchy to navigate. 'Destination' items act as a navigation element and do not have an icon. When a user selects one, they are taken to a new page in the product.

Organising submenus

Submenus should be directly related to their 'parent' – i.e. if a parent is labelled 'Department', the submenu should display a list of 'parent' or 'destination' menu items that are Departments. Try to organise these menus as logically as possible.

There is not a limit on the number of submenus that a Flyout can contain, but as a good rule of thumb any more than three may be confusing for a user, as they will begin to have a large menu hierarchy to navigate which might be overwhelming.

Uh-oh! Looks like we haven't finished building this page yet.

Come back soon, and we'll have more exciting content to share.