Skip to content
UI Kit
Accent color

Tabs, accordions, breadcrumbs and pagination

Tabs, accordions, breadcrumbs, pagination, steppers and link lists.

6 components · 15 variants
Switch category

Small parts that show where you are

Navigation elements answer two questions on every page, where am I and where can I go. The six components here follow the keyboard patterns people expect, arrow keys in tabs, Home and End in lists, and they stay readable when JavaScript is off.

Tabs switch between views of the same thing, as underline, pills, segmented or vertical. Accordion folds long content into rows on native details, good for FAQs and specs. Breadcrumbs show where a page sits and shrink to a back link on phones. Pagination moves through results with numbers or a load more button. Stepper shows the steps of a process, Link list groups links in menus and settings.

Use tabs only for content of equal weight, the first tab is often the only one people see. Keep breadcrumbs on every page below the top level, they also feed structured data. Number pages with real links, so search engines can follow them.

On this page

Every component of this category. Pick one to jump to its variants.

accordion

Accordion

Disclosure rows on native details: readable without JavaScript, one or many open, smooth where the browser allows.

Props and details · Accordion

One at a time

Hairlines between rows, opening one closes the other. The plus turns into a minus.

Cards

Separate surfaces, several open at once. The open card rises a little.

With icons

One bordered box with icons and a line under each title, for shop and service details.

tabs

Tabs

Underline, pills, segmented and vertical tabs with icons and counts, arrow keys and a sliding indicator.

Props and details · Tabs

Underline

The default for pages and panels. The row scrolls sideways on phones, the active tab stays in view.

Pills and segmented

Pills for filters above content, segmented for two to four equal views.

Vertical

A side list for settings from tablet up, a scrolling row on phones. Up and down arrows move.

breadcrumbs

Breadcrumbs

Where a page sits, as a trail, a collapsed trail with a menu or a contained bar. On phones a back link.

Props and details · Breadcrumbs

pagination

Pagination

Numbers with gaps, simple previous and next, a results line and load more. Compact on phones.

Props and details · Pagination

Numbers

Neighbours of the current page, first and last, gaps in between. Phones get "5 of 12".

Load more

For feeds and shops: how far you are, and one button for the next batch. New cards arrive one after another.

stepper

Stepper

The steps of a process, horizontal or vertical, with done, current, upcoming and error said in words.

Props and details · Stepper

Horizontal

Numbers or icons on one track that fills up. Phones get the step name and a segmented bar.

Vertical

Room for a sentence per step, for onboarding and order tracking. An error stays visible until fixed.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Navigation elements on a page.

Often searched

Jump to

Copied to the clipboard