This article is the eleventh edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
An inline function tray is an interface pattern that lists functions that you can apply to information in a given context. Below, I walk through a few examples of this pattern that I like.
A common use of function trays is to provide text highlighting options. For example, when you elect text in Ghost, a tray pops up with options to format the text in bold, italics, as a heading or subheading, as a quote, or to add a link to the text:
The functions in the tray apply onto to the context of the selected text.
The feature to add links to text is especially interesting. When you select the link icon, you can search your Ghost instance for blog posts and select one that matches your search query. This may be more convenient than navigating to another tab to find a blog post if you don’t already have the URL of the post you want to link. You can also paste in any internal or external URL and set it as the link anchor.
Google Colab, a notebook interface in which you can write code, has a function tray too. Notebooks are made of “cells.” Each cell can contain code or text. When you focus on a cell in Colab, a task tray pops up with functions you may want to apply, such as moving the cell to another location in the notebook, creating a comment, and more:
The functions in the tray apply to the whole cell rather than specific text in the cell.
Notion, the text editing tool, has a function tray with support for various text formatting options, from marking text as code to adding a link to formatting text as an equation:
You can also trigger the tray for line-level changes by hovering over a line of text or a block and clicking on an icon:
Google Docs has inline function trays, too. When you hover over text in Google Docs in editing mode, a tray pops up with the option to create a comment, apply an emoji response, or enter into the suggest edits mode:
Inline function trays in a specific context like the Ghost and Colab examples help users both understand the ways in which they can interact with data in that context and perform an action on highlighted data.
Inline function trays open when a user selects information in a specific context. They can be used to provide links to common or useful data manipulation methods such as text formatting options. Inline function trays that appear in a specific context are common in text editing applications but have applications in other tools too.
Menu bars are examples of function trays, too, although menu bars may be used to create and import information that is outside of a selected context. In addition, menu bars are not inline: they are a globally-accessible interface element.
