component
Chevron
also called arrow indicator (community), chevron icon (community), angle bracket (community)
The small angle bracket used as a directional marker: down means this opens, right means this goes deeper, in breadcrumbs it means next level.
A chevron is two strokes meeting at a point, and the only thing it carries is direction. It is never the control: it rides inside one, at the trailing edge of a row, beside the label of a select, or between the crumbs of a set of breadcrumbs. Because a single glyph rotated four ways covers every direction a control needs, most icon sets ship one chevron and let a transform do the rest, which is why the same shape can mean “opens downward” in one row and “continues that way” in the next without a reader ever noticing they are the same drawing.
The conventions are worth stating because they are load-bearing. Pointing down means a surface will appear below this control: a select, a dropdown, a menu button. Pointing right means there is more in that direction, either another level of a drill-down navigation list or the next segment of a trail. Pointing up means the thing currently open will close, or that the page will return to the top. In a disclosure the glyph turns rather than being swapped: right when collapsed, a quarter turn to down when open, so the rotation itself reads as the change of state. That turn is why an accordion header with a chevron feels honest and one with a static plus sign does not.
The chevron reports the state; it does not hold it. What a screen reader announces comes
from aria-expanded on the trigger (see expanded state) and from
aria-haspopup where a menu is involved (see has popup), so the glyph
itself is decoration and belongs behind aria-hidden (see
aria-hidden). Getting this backwards is a common bug: a control whose only
statement of openness is a rotated icon is silent to everyone not looking at it, and a
control that announces aria-expanded="true" while its chevron still points right is
lying to everyone who is.
Two neighbours share the job and neither shares the name. The disclosure triangle is the filled solid that does the same work in file trees and native outline views, older than the chevron and still the platform default on macOS. And the caret is the blinking text insertion point, a different thing entirely, even though plenty of component libraries call their dropdown glyph a caret: if a team says caret and means the arrow on a select, chevron is the word that will not be misread.
Which word?
| If you want | say |
|---|---|
| naming the little angle arrow on a control | chevron |
| the little triangle that opens a branch | disclosure triangle |
| the text insertion marker, not the mouse pointer | caret |
| the arrow in a header showing the sort | sort indicator |
| the little triangle pointing at the trigger | popover arrow |