What you call this web site menu element?

Question

The Google material design is new, I like to know how you call this menu element, or how will you name it:

The page link:https://developers.google.com/ios/guides/cocoapods

**The item we are talking about is located in the sub head area.

In this link it works like menu, and has a class name "nav-tab-list". In some other material design site it works like just a tab(will not target to different page).

Answer 1

It is a tab, styled according to the Material Design guidelines as you hinted.

According to the Navigation Pattern from Google:

Tabs allow users to quickly move between a small number of equally important views.

Appropriate for these hierarchies:

• Parents with embedded child views

• A group of sibling views

Recommended for:

• Frequent switching between views

• Apps with few top-level views

• Promoting awareness of alternate views

In this case, I would say that it corresponds to Apps with few top-level views. While MDL was created mainly for applications, most concepts can be applied to a regular Web site. You may have to adapt things here and there.

Answer 2

As the name 'nav-tab-list' or Navigation tab list also suggests, these are basically navigation elements in tabs or call it Tab elements or simply Menu items.

Also, there are basically two elements in a tab, Indicator(White bold line in your case) and Label. Nothing more to it, I think.