menu
Menu
tab
palette
Alt Theme
brightness_3
Dark Mode
format_align_right
Right-to-Left
format_size
200% Text
Tabs make it easy to explore and switch between different views.

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

looks_one
Tab Item One
looks_two
Tab Item Two
looks_3
Tab Item Three

Sample Content One

Unfocusable when inactive

HTML Ordered List with (#) representing DOM position

  1. (1) Layer hidden when active (peek only)
  2. (2) Layer removed when active (peek only)
  3. (3) Always visible
  4. (4) Layer hidden when inactive (active only)
  5. (5) Layer removed when inactive (active only)
  6. (6) Always visible

Sample Content Two

Unfocusable when inactive

HTML Ordered List with (#) representing DOM position

  1. (1) Layer hidden when active (peek only)
  2. (2) Layer removed when active (peek only)
  3. (3) Always visible
  4. (4) Layer hidden when inactive (active only)
  5. (5) Layer removed when inactive (active only)
  6. (6) Always visible

Sample Content Three

Unfocusable when inactive

HTML Ordered List with (#) representing DOM position

  1. (1) Layer hidden when active (peek only)
  2. (2) Layer removed when active (peek only)
  3. (3) Always visible
  4. (4) Layer hidden when inactive (active only)
  5. (5) Layer removed when inactive (active only)
  6. (6) Always visible
Javascript
Ink
Surface
Scrollable
HTML Code
Javascript Code
Samples
Item One
Item Two
Item Three
Item One
Item Two
Item Three
12:30

Item One
Item Two
Item Three
12:30

Item One
Item Two
Item Three
Item One
Item Two
Item Three
12:30

Item One
Item Two
Item Three
Item One
Item Two
Item Three
12:30

phone
Recents
favorite
Favorites
person_pin
Nearby
12:30

phone
favorite
person_pin
12:30

phone
Recents
favorite
Favorites
person_pin
Nearby
Recents
Favorites
Nearby
12:30

phone
Recents
favorite
My Oversized Favorites Tab
person_pin
Nearby
edit
Edit
clear
Clear
search
Search
restore
Restore
stars
Stars
1
2
3
4
5
6
7
8