1

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.

enter image description here

1
  • It speaks volumes that you had to tell us that it looks like it should do something that it doesn't - I would strongly suggest you avoid confusing your users with patterns like this. Commented Jul 12, 2022 at 13:59

2 Answers 2

1

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: Demonstration of a list with three items from iOS, named Table Row 1 to 3

0

It's a simple button with an icon to jump to another page. The normal icon of an accordion menu is the caret.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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