Structure
Use nav, lists or clear link groups where appropriate.
Platform under construction
Navigation
Navigation CSS helps users understand where they are, where they can go and what path matters next.
.nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav a[aria-current="page"] { color: var(--green); }
.nav a:focus-visible { outline: 3px solid var(--focus); }
Component mental model
Navigation is orientation before decoration.
Navigation is one of the most important components on a site. It should be predictable, scannable and usable before it becomes visually expressive.
Good navigation styling makes current location, available sections and primary actions obvious.
Responsive navigation must work with touch, keyboard and long labels. A beautiful desktop nav that collapses badly is not production ready.
Active state
Show the current page or section clearly.
Spacing
Links need room to scan and tap.
Responsive pattern
Choose wrap, scroll, disclosure or drawer intentionally.
Visual model
See the parts of the component before styling the surface.
Good CSS versus fragile CSS
Navigation with active and focus states
.nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.nav a[aria-current="page"] { color: var(--green); }
.nav a:focus-visible { outline: 3px solid var(--focus); }Navigation that only works with a mouse
.nav a { padding: 4px; }
.nav a:hover { color: red; }
.nav .current { display: none; }Rules of thumb
Components need systems, not one-off decoration.
Make active visible
Users should not need to guess where they are.
Protect keyboard focus
Every nav link needs a visible focus style.
Design long labels
Navigation should not break when a label grows.
Use touch-safe targets
Small nav links are painful on mobile.
Avoid hover-only dropdowns
Touch and keyboard users need an accessible pattern.
Keep primary nav limited
Too many top-level links reduce scanning quality.
Production thinking
A component is only good when real content and real states still work.
Why does this matter?
Navigation controls the perceived complexity of a site. If the nav feels messy, the whole product feels messy.
Accessibility
Use aria-current for the active page when appropriate and keep navigation reachable by keyboard.
Production note
Test navigation at narrow widths, with zoom and with translated or longer labels.
SEO note
Clear internal navigation helps crawlers and users discover important sections.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Add a longer link label and check wrapping.
- Remove aria-current styling and decide if orientation suffers.
- Change the nav border radius to 12px and judge the tone.
Practice assignment
Do this before moving to the next lesson.
- Create a nav with four links.
- Add an active state with aria-current.
- Make the nav wrap without text overlap.
Try it yourself
Style a responsive navigation row
Self-check
Before you continue, prove that you understand Navigation.
Answer these questions before moving on. If a state, long label or mobile width breaks the component, the component is not finished yet.
- Can you make the current page clear?
- Can you keep navigation touch-safe?
- Can you avoid hover-only behavior?
- Can you preserve keyboard focus visibility?
- Can you explain why fewer primary links often scan better?
Senior audit upgrade
CSS alone rarely makes a complete accessible menu.
Hover dropdowns can look done, but keyboard behavior, open state, escape behavior and aria state usually require JavaScript too.
Hover is not enough
Touch and keyboard users need a way to open and close menus.
aria-current
Mark the current page or section when navigation points to the active location.
Progressive approach
Start with real links that work before adding dropdown behavior.