What is this button called? The example provided here is from AirBnB's web and is also used on mobile. It looks like an accordion, but does not expand, and instead acts like a true button.
I really like this- it's clean and simple.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityWhat is this button called? The example provided here is from AirBnB's web and is also used on mobile. It looks like an accordion, but does not expand, and instead acts like a true button.
I really like this- it's clean and simple.
I would call them menu items, as they are used for navigation deeper into the hierarchy. If they are placed inside a dropdown or context menu, they indicate a submenu (also another level). The relationship between both presentations of a menu might be responsive, meaning on small viewports you change view, while on bigger ones you directly can navigate into deeper hierarchies.
On small viewports, in Left-to-right locales, the caret to the right indicates an upcoming view, and the corresponding animation usually is a swipe-in from the right. This conveys the metaphor of diving down into the hierarchy to the right, and back up to the left.
I think Material Design had a name for this kind of navigation, but I currently don’t remember which. The current version does not seem to include this kind of button.
Due to users’ exposure to both platforms, this has become a standard on the web as well, where a view equals a page.
In iOS you can also find similar buttons in Lists or tables:
It's a simple button with an icon to jump to another page. The normal icon of an accordion menu is the caret.
The arrow has two possibilities of use:
There are some subtle differences in what these icons are commonly used to represent — while the caret and plus icons are typically meant to indicate that an accordion will open, designers have used the right-facing arrow icon to signal two different actions: either staying on the same page and expanding content or visiting a different page.
Info and image from nngroup.com