CSS Navigation Examples

Navigation is the part of a site people use without thinking about it, which is exactly why it repays being built carefully. Menus that open on hover, tabs that swap panels, breadcrumbs that show depth, and drawers that slide in on a phone all come from a small set of CSS features: :hover, :target, :focus-within, and the state a hidden checkbox or radio can hold.

The examples below cover those patterns and the ones that react to scrolling, such as headers that shrink and indicators that track which section you are reading. Each page explains what the pattern can and cannot do without script, including the cases where a keyboard user would be left behind.