Click a link — the whole top strip is the header; just the row of links is the nav
Site Header vs. Navigation Bar
/ <header> · <nav> /
also called navbar, topbar, app bar, main navigation, page header
“The navbar” is usually two nested things. The site header is the whole strip across the top — logo, links, search, sign-in — and in HTML it is the page-level <header>, the banner landmark. The navigation bar proper is only the group of destination links inside it: a <nav> element, with aria-current="page" marking the link for the page you are on. On macOS the bar at the very top of the screen is the menu bar — a different thing.
If you called it…
…you meant a site header vs. navigation bar.
Anatomy — every part, named
- 1Site header
<header>“The whole bar across the top of the site” is the site header — the full-width shell holding the brand, the nav, and the actions; the page's banner landmark.
- 3Current-page link
aria-current="page"“The menu item that stays highlighted because you're on that page” is the current-page link — marked with aria-current="page" and styled off that attribute.
Prompt — paste into your agent
Build a site header with a navigation bar: a page-level <header> (the banner landmark) containing the brand mark, a <nav aria-label="Main"> wrapping only the row of destination links, and the actions on the right. Mark the link for the current page with aria-current="page" and style the current state off that attribute, not off a class.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my site header / navbar (<header>, <nav>, aria-current). Rule out: the whole header wrapped in <nav> so screen readers announce buttons and the logo as navigation (only the link group is <nav>); two unlabeled <nav> elements (give each an aria-label); the current-page style set by a class that fell out of sync with the route instead of aria-current="page"; the header overlapping content because it was made position: fixed without reserving its height. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <header> | page-level <header> is the banner landmark |
| HTML | <nav> | only the group of destination links |
| ARIA | aria-current="page" | marks the link for the page you are on |
| ARIA | role="banner" |