Pills

Pills

Pill navigation uses rounded active states and is useful for secondary navigation, filters, and compact category switching.

Core concept

Explain nav-pills, vertical pills, flex-column, nav-fill, nav-justified, and combining pills with responsive layouts.

Using it in a real interface

Create a product filter with category pills and a vertical settings menu. Explain when horizontal pills are appropriate and when a sidebar-style vertical arrangement is easier to scan.

Implementation notes

Pills should not be chosen only because they look attractive. The shape should support the distinction between navigation, filtering, and ordinary buttons.