MenusLesson 55Free preview

Pill Navigation

This lesson is part of How To · All levels

Summary

Pill navigation displays the menu link as a circular capsule that is in line with each other. This shape gives a modern impression and makes categories easy to scan. The active links are usually solidly colored, while other links use a soft background that changes as they hover.

Key points

Border-radius: 999px produces capsule shape although the height of the element changes.
Display: flex with gaps keeping the distance between the pins consistent.
The .active class provides a solid background to the category being selected.
Flex-wrap: wrap makes the pill go down to the new line on a narrow screen.
Aria-current="page" marks an active link for the screen reader.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.