17

In UI design, sometimes settings are hidden behind a little arrow or "+" symbol. When the user clicks on it, the item expands to show additional details.

Does this UI pattern have a name? Other than "little arrow"?

For example: "Click on the little arrow and edit the details for..."

Versus: "Click on the <insert-term-here> and edit...etc..."

Improve this question
2
  • 4
    They are called: carat Not to be confused with carrot :)
    – user87287
    Jul 9, 2016 at 0:39
  • 1
    A good summary of UI design for progressive disclosure provided by Microsoft: Progressive Disclosure Controls
    – Phillip Kent
    Oct 17, 2017 at 9:10

4 Answers 4

Reset to default
18

The overarching design pattern itself is generally referred to as progressive disclosure. I personally often hear it referred to as a collapsible section/panel. Yahoo's pattern library lists a similar concept as Expand Transition, although that pattern speaks more to the transition from collapsed to expanded.

When speaking about the icons used in these type of expand/collapse implementations, I generally refer to them by their canonical name. For the plus symbol I would therefore say "click the plus icon to expand the content and/or show the details." For the arrow indicators I would use the name of the symbol yet again, as in "click the arrow to expand the content and/or show the details."

Improve this answer
3
  • 1
    Great references!
    – Kevin Peno
    May 17, 2012 at 17:23
  • 2
    Thanks for the answer. Other names I found this morning: "expanding arrows", "folding arrows", and "disclosure widget". en.wikipedia.org/wiki/Disclosure_widget
    – Stéphane
    May 17, 2012 at 18:02
  • @Stéphane The last you mentioned is my new favorite :)
    – GotDibbs
    May 17, 2012 at 18:36
7

I think you are talking about the carats. Jquery's UI library has defined line of code for every particular icon.some of them are :

But try not to use these on the headers. As for the headers the UI looks intuitive when we use icons like hamburger, kebab etc. enter image description here

Carats are for the in page navigation only.

Improve this answer
1
  • 3
    The term is actually caret, not carat
    – spiral
    Apr 6, 2018 at 14:25
1

I tend to use Show/Hide, although I'm sure other terms are fine :)

Improve this answer
0

It depends on the interface, Gennerally I call them call links or select boxes.

Improve this answer
1
  • Calling show/hide icons links or select boxes could be confusing because even if you use links or select boxes as the show/hide controls, the term also encompasses other links and select boxes on the page. But if you're referring to them as their canonical name, such as "click the show link" then you should be safe and that's basically what the selected answer said.
    – JD Smith
    Jul 19, 2012 at 16:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.